Skip to content

getBoundingClientRect ignores some block boxes of inline parent #41275

@longvatrong111

Description

@longvatrong111

Describe the bug:
getBoundingClientRect for an inline element parent only considers block boxes children if they are "wrapped" by 2 inline boxes before andd after.

To Reproduce:

<!DOCTYPE html>
<style>
    .test-class {
        display: inline;
        font-size: 10px;
    }

    .inline {
        display: inline;
        background: burlywood;
    }

    .block {
        width: 50px;
        height: 50px;
        background: blanchedalmond;
    }
</style>

<body>
    <div>
        <div class="test-class">
            <div class="block">block</div>
            <div class="inline">inline</div>
            <div class="block">block</div>
            <div class="inline">inline</div>
            <div class="block">block</div>
        </div>
    </div>
</body>

<script>
    const el = document.querySelector('div.test-class');
    console.log('Size:', el.getBoundingClientRect().width, 'x', el.getBoundingClientRect().height);
    console.log('Computed display:', getComputedStyle(el).display);
    console.log('Computed size:', getComputedStyle(el).width, 'x', getComputedStyle(el).height);
</script>

In Servo (only the 2nd block dive is considered)
Image

In Chromium:
Image

May modify the list of children to see more

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions