Attachment 370170 Details for Bug 198009 – test page to reproduce the issue

test page to reproduce the issue

io-inline-bounding-rect.html (text/html), 1.00 KB, created by IvanX on 2019-05-17 16:49:34 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: IvanX

Created: 2019-05-17 16:49:34 PDT

Size: 1.00 KB

patch

obsolete

><!DOCTYPE html>
>
><style>
>#target {
>  display: inline;
>}
>.spacer {
>  height: 2000px;
>}
></style>
>
>
><div id="target">
>  <div>
>    <img width=100 height=100 />
>  </div>
></div>
><div class="spacer"></div>
>
><script>
>  var callback = function(entries, observer) {
>    entries.forEach(entry => {
>      console.log(entry);
>      console.log('From IntObs: wrapper boundingClientRect: ' + 
>        ' width: ' + entry.boundingClientRect.width + 
>        ' height: ' + entry.boundingClientRect.height);
>
>      console.log('From IntObs: wrapper intersectionRect: ' + 
>        ' width: ' + entry.intersectionRect.width + 
>        ' height: ' + entry.intersectionRect.height);
>
>      console.log('From element.boundingClientRect wrapper: ' +
>        ' width: ' + 
>        document.querySelector("#target").getBoundingClientRect().width +
>        ' height: ' + 
>        document.querySelector("#target").getBoundingClientRect().height);
>      });
>  }
>
>  new IntersectionObserver(callback).observe(document.querySelector('#target'));
></script>

<!DOCTYPE html>

<style>
#target {
  display: inline;
}
.spacer {
  height: 2000px;
}
</style>


<div id="target">
  <div>
    <img width=100 height=100 />
  </div>
</div>
<div class="spacer"></div>

<script>
  var callback = function(entries, observer) {
    entries.forEach(entry => {
      console.log(entry);
      console.log('From IntObs: wrapper boundingClientRect: ' + 
        ' width: ' + entry.boundingClientRect.width + 
        ' height: ' + entry.boundingClientRect.height);

      console.log('From IntObs: wrapper intersectionRect: ' + 
        ' width: ' + entry.intersectionRect.width + 
        ' height: ' + entry.intersectionRect.height);

      console.log('From element.boundingClientRect wrapper: ' +
        ' width: ' + 
        document.querySelector("#target").getBoundingClientRect().width +
        ' height: ' + 
        document.querySelector("#target").getBoundingClientRect().height);
      });
  }

  new IntersectionObserver(callback).observe(document.querySelector('#target'));
</script>

Actions: View

Attachments on bug 198009: 370170 | 370337 | 370396 | 370402 | 370403 | 370405 | 370411 | 370413 | 370420