Looks like it's waiting for the import to fail before reporting the correct size even though content has been rendered. This is clearly incorrect.

Hi Guys,

I just looked at this bug hoping to fix but I noticed something a bit strange.
I can replicated problem using the the above mentioned snippet. But when I add a log before and after trying to load  the link everything looks fine (I get a non zero rectangle)

<div>hello</div>
<script>
  var link = document.createElement('link');
  link.rel = 'import';
  link.href = 'bad/import.html';

  var div = document.querySelector('div');
  console.log(div.getBoundingClientRect());
  document.head.appendChild(link);
  var div2 = document.querySelector('div');
  console.log(div2.getBoundingClientRect());   
</script>

test.html:8 ClientRect {top: 8, right: 1912, bottom: 26, left: 8, width: 1904…}bottom: 26height: 18left: 8right: 1912top: 8width: 1904__proto__: ClientRect
test.html:11 ClientRect {top: 8, right: 1912, bottom: 26, left: 8, width: 1904…}
test.html:9 GET file:///C:/Users/ramzi.rhahlia/Desktop/bad/import.html net::ERR_FILE_NOT_FOUND(anonymous function) @ test.html:9

This made me a bit confused. Do you think of any explanation to this from the top of you head.
Do you have an idea where about in the code to look?

Sorry if may question is so simple I am still new to this and still finding my way.

Hey guys,

I also looked into this issue recently:)

Reason:
'import' will block rendering process when it is not loaded yet.
In this case, 'import' is created dynamicly by js, so script won't be blocked by 'import'.
After append 'import' into document, the rest of js will be excuted.
When come to 'div.getBoundingClientRect()', we need 'Document::updateStyleAndLayoutIgnorePendingStylesheets()'. 
We plan to calculate style, build layout tree, and layout.
But at the calculate-style point, it'll be blocked by 'Document::isRenderingReady()' at 'StyleResolver::styleForElement'. More specific, it'll block by 'Document::haveImportsLoaded()'.
So 's_styleNotYetAvailable' will be used as the tyle of document, and 'div.getBoundingClientRect()' will get an empty rect.

Approach:
I think if IgnorePendingStylesheets is true, ImportsLoader need to be ignored too.

codereview:
https://codereview.chromium.org/2729493002/

Guys, if I misunderstood about anything, just point it out. Thanks:)

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fd74982786ba429438c10f2804e0a3cd16fb8bbf

commit fd74982786ba429438c10f2804e0a3cd16fb8bbf
Author: cathiechen <cathiechen@tencent.com>
Date: Mon Mar 06 04:43:22 2017

'haveImportsLoaded' shouldn't block rendering, if ignoringPendingStylesheets is true.

BUG= 629236 

Review-Url: https://codereview.chromium.org/2729493002
Cr-Commit-Position: refs/heads/master@{#454826}

[modify] https://crrev.com/fd74982786ba429438c10f2804e0a3cd16fb8bbf/third_party/WebKit/Source/core/dom/Document.cpp
[modify] https://crrev.com/fd74982786ba429438c10f2804e0a3cd16fb8bbf/third_party/WebKit/Source/core/dom/Document.h
[modify] https://crrev.com/fd74982786ba429438c10f2804e0a3cd16fb8bbf/third_party/WebKit/Source/web/tests/DocumentLoadingRenderingTest.cpp

Issue 719078 has been merged into this issue.