Bug Report: Incorrect Height Percentage Calculation in HtmlUnit
Version
implementation("org.htmlunit:htmlunit:4.10.0")
Description
When using percentage-based height values in CSS, HtmlUnit incorrectly calculates the rendered height. It appears that height percentages are being calculated at half their expected value (as if dividing by 2 twice).
Steps to Reproduce
- Create an HTML page with a div element that has percentage-based dimensions (e.g., 50% width and 50% height)
- Set the viewport to a specific size (e.g., 1000px width and 640px height)
- Use
getComputedStyle()to retrieve the computed dimensions of the div
Expected Behavior
For a div with height: 50% in a viewport with height 640px, the computed height should be 320px (50% of 640px).
Actual Behavior
The computed height is 160px, which is 25% of 640px (as if applying 50% twice).
Test Case
@Test
public void testViewportWidthResponsiveness() {
try (final WebClient webClient = new WebClient(BrowserVersion.CHROME)) {
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setJavaScriptEnabled(true);
String html = """
<html>
<head>
<title>Viewport Width Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#testDiv {
width: 50%;
height: 50%;
background-color: blue;
}
</style>
</head>
<body>
<div id="testDiv">Test Div</div>
</body>
</html>
""";
// Test with 1000px viewport width
webClient.getCurrentWindow().setInnerWidth(1000);
webClient.getCurrentWindow().setInnerHeight(640);
HtmlPage page = webClient.loadHtmlCodeIntoCurrentWindow(html);
webClient.waitForBackgroundJavaScript(2000);
HtmlElement divElement = (HtmlElement) page.getElementById("testDiv");
Window jsWindow = page.getEnclosingWindow().getScriptableObject();
var computedStyle = jsWindow.getComputedStyle(divElement.getScriptableObject(), null);
System.out.println("Width: " + computedStyle.getPropertyValue("width"));
System.out.println("Height: " + computedStyle.getPropertyValue("height"));
// Expected: 500px width (correct) and 320px height (50% of 640px)
// Actual: 500px width and 160px height (25% of 640px)
assertEquals("500px", computedStyle.getPropertyValue("width"));
assertEquals("320px", computedStyle.getPropertyValue("height")); // This assertion fails
} catch (Exception e) {
fail("Test failed with exception: " + e.getMessage());
}
}
### Test Results
%TESTC 1 v2
%TSTTREE1,testViewportWidthResponsiveness(org.example.AppTest),false,1,false,-1,testViewportWidthResponsiveness(org.example.AppTest),,
%TESTS 1,testViewportWidthResponsiveness(org.example.AppTest)
%FAILED 1,testViewportWidthResponsiveness(org.example.AppTest)
%EXPECTS
320px
%EXPECTE
%ACTUALS
160px
%ACTUALE
%TRACES
org.junit.ComparisonFailure: expected:<[32]0px> but was:<[16]0px>
at org.junit.Assert.assertEquals(Assert.java:117)
at org.junit.Assert.assertEquals(Assert.java:146)
at org.example.AppTest.testViewportWidthResponsiveness(AppTest.java:142)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:77)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:569)
at org.junit.runners.model.FrameworkMethod$1.runReflectiveCall(FrameworkMethod.java:59)
at org.junit.internal.runners.model.ReflectiveCallable.run(ReflectiveCallable.java:12)
at org.junit.runners.model.FrameworkMethod.invokeExplosively(FrameworkMethod.java:56)
at org.junit.internal.runners.statements.InvokeMethod.evaluate(InvokeMethod.java:17)
at org.junit.runners.ParentRunner$3.evaluate(ParentRunner.java:306)
at org.junit.runners.BlockJUnit4ClassRunner$1.evaluate(BlockJUnit4ClassRunner.java:100)
at org.junit.runners.ParentRunner.runLeaf(ParentRunner.java:366)
at org.junit.runners.BlockJUnit4ClassRunner.runChild(BlockJUnit4ClassRunner.java:103)
at org.junit.runners.BlockJUnit4ClassRunner.runChild(BlockJUnit4ClassRunner.java:63)
at org.junit.runners.ParentRunner$4.run(ParentRunner.java:331)
at org.junit.runners.ParentRunner$1.schedule(ParentRunner.java:79)
at org.junit.runners.ParentRunner.runChildren(ParentRunner.java:329)
at org.junit.runners.ParentRunner.access$100(ParentRunner.java:66)
at org.junit.runners.ParentRunner$2.evaluate(ParentRunner.java:293)
at org.junit.runners.ParentRunner$3.evaluate(ParentRunner.java:306)
at org.junit.runners.ParentRunner.run(ParentRunner.java:413)
at org.eclipse.jdt.internal.junit4.runner.JUnit4TestReference.run(JUnit4TestReference.java:93)
at org.eclipse.jdt.internal.junit.runner.TestExecution.run(TestExecution.java:40)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:520)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:748)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.run(RemoteTestRunner.java:443)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.main(RemoteTestRunner.java:211)
%TRACEE
%TESTE 1,testViewportWidthResponsiveness(org.example.AppTest)
%RUNTIME1011
HtmlUnit / htmlunit
HtmlUnit is a "GUI-Less browser for Java programs".
871
How does funding with Polar work?
1
Pay now to fund the work behind this issue.
2
Get updates on progress being made.
3
Maintainer is rewarded once the issue is completed.
FAQ
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too