#1986 getPosX, getPosY, getBoundingClientRect return incorrect values

[Bogdan]

Im running htmlunit 2.32, all dependecies are checked.

To reproduce I compare GoogleChrome console result with the HmlUnit:

load for test the HTML page at:
https://www.le.ac.uk/oerresources/bdra/html/page_09.htm

In Google Chrome Console run:

document.getElementById("toc").getBoundingClientRect()

result:
DOMRect {x: 1, y: 63.609375, width: 180, height: 458.609375, top: 63.609375, …}
bottom:522.21875
height:458.609375
left:1
right:181
top:63.609375
width:180
x:1
y:63.609375

In HtmlUnit:

webClient = new WebClient(BrowserVersion.CHROME));
webClient.getOptions().setJavaScriptEnabled(true);
webClient.getOptions().setRedirectEnabled(true);
webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
webClient.getOptions().setThrowExceptionOnScriptError(false);
webClient.setRefreshHandler(new RefreshHandler() {
public void handleRefresh(Page page, URL url, int seconds) throws IOException {
}
});
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setTimeout(timeout * 1000);
webClient.setJavaScriptTimeout(1000);
Page somepage = webClient.getPage(url);

then:

HtmlDivision div = (HtmlDivision) page.getElementById("toc");
ClientRect rect = ((HTMLElement) (div).getScriptableObject()).getBoundingClientRect();

rect values:

bottom: 90
left: 9195
right : 10451
top: 90

getPosX and GetPosY return:

x: 9195
y: 90

[Bogdan]

... continued

where div is the "toc" div element:

((HTMLElement) (div).getScriptableObject()).getHeight()
((HTMLElement) (div).getScriptableObject()).getWidth()

height: 768
width: 1024

[Bogdan]

My debugging points the problem inside the method ComputedCSSStyleDeclaration.getLeft() somewhere between lines 1505-1525. Im not sure, maybe someone can confirm?

[RBRi]

Hi Bogdan,
please keep in mind HtmlUnit is an headless browser; there is no layouting and result the calculated layout properties are not comparable with real browsers.

Have done a small fix - pleae check if this makes the situation better for you.

[Bogdan]

Hi again, I'm forced to use HtmlUnit through Maven public repo. Is your fix pushed to the maven repo 2.32-SNAPSHOT?
I checked the 2.32-SNAPSHOT a few minutes ago and I have a feeling that your fix is not published yet. How to get it as a build inside a Maven project (I'm using IntelliJ)? Thanks in advance,
Bogdan

[RBRi]

Sorry for the delay but had some technical problems with Sonatype and was busy bringing the code to github. There is a new snapshot available..
Usually i will inform about snapshot updates via twitter https://twitter.com/HtmlUnit

[Bogdan]

Hi again, any feedback on my comment?

[Bogdan]

Got the snapshot ok. Your fix looks good on the X axis. While not exactly an exact match with browers, I am fine with an aproximative coordinate X location. However, can you please have a look at the getTop() or HTMLElement.getPosY()? The values for Y axis are still quite off. Again, I am looking for a good enough, not an exact match to browser rendering. For example now, there is a difference in Y value even for items on the same table row. Please confirm.

[RBRi]

Have done another update fot the top position.
Again: i will inform about snapshot updates via twitter https://twitter.com/HtmlUnit

[RBRi]

Does the latest snapshot help - regarding getTop?

[Bogdan]

Hi again, sorry for the delay, i was waiting for a twitter post ;)...
The calculation of the getTop changed in behaviour but the values are still not close to the expected magnitude (it returns even for the top most elements values in the thousands even if i expect tens or hundread pixels).
Please use the attached as a test case. You will find in all HTML Paragraph elements 4 atttributes (ie topbw, leftbw, bottombw, rightbw) as the computed coordinates from browser (eg Safari or Google)
I use the script myFunction to populate those.
Example:
<td class="tr6 td0"><p class="p1 ft10" topbw="124" leftbw="79" rightbw="429" bottombw="139">ZZZZZZ</p></td>

[Bogdan]

Hi again, any feedback on this issue? Were you able to have a look at the test document I provided? Cheers, Bogdan

[Bogdan]

Hi again, any progress on this issue? Any plans to bring the computed values closer to the real world?
I'd like to know what to expect from the htmlunit project. In my project, we need x/y coordinates values as realistic as possible (even if not pixel accurate as compared with the values the browsers are reporting).

[Bogdan]

Hi guys, Any progress on this issue?
Cheers.

[Bogdan]

And me again. Any chance to lookin into this? If this cannot be fixed, I'd like to know as this is a make or break bug for my project. We may have to re-write our DOM processing layer ...
Please adivice,
Bogdan

[RBRi]

Sorry for not beeing responsive at the moment. There is simply not enough time; all the work on HtmlUnit is done in my spare time and i have a real job and a real family too.

Even if layouting is not at the core of HtmlUnit we try to make it as accurate as possible. Will have a look at your test document later on today.

[RBRi]

It will be great if you can help a bit with this. The whole source code is on github, i hope you are able to checkout the code. To do some more layout fixes i need simple test cases pointing to a simple problem. Maybe you can reduce your sampe step by step to find the first real isolated problem. Than you can create a new test case (have a look at this commit https://github.com/HtmlUnit/htmlunit/commit/90bc9caf824ae71d7c2715b89e734d8d37e9a7c0) and make pull requests out of this (or patches if you like).
Usually nailing down the problem list the most time consuming task, having this simple test cases will really help.

Thanks for your support