Skip to content

Missing documentation for contentRect/contentBoxSize/borderBoxSize/devicePixelContentBoxSize bindings #10269

Closed as not planned
@samal-rasmussen

Description

@samal-rasmussen

Describe the bug

Bindings for contentRect/contentBoxSize/borderBoxSize/devicePixelContentBoxSize were added in this pr: #8022

They were mentioned in the Changelog and June 2023 blog entry: Changelog, blog

But nothing about them was ever added to the docs.

The right place to describe then is probably around here: https://svelte.dev/docs/element-directives#block-level-element-bindings

Reproduction

Here's a REPL with the feature in action: Svelte 5 preview REPL

<script>
	let borderBoxSize;
	let contentBoxSize;

	$: borderBoxWidth = borderBoxSize ? borderBoxSize[0].inlineSize : -1;
	$: borderBoxHeight = borderBoxSize ? borderBoxSize[0].blockSize : -1;

	$: contentBoxWidth = contentBoxSize ? contentBoxSize[0].inlineSize : -1;
	$: contentBoxHeight = contentBoxSize ? contentBoxSize[0].blockSize : -1;
</script>

<div bind:borderBoxSize bind:contentBoxSize></div>

<p>border box size = {borderBoxWidth} x {borderBoxHeight}</p>
<p>content box size = {contentBoxWidth} x {contentBoxHeight}</p>

<style>
	div {
		padding: 10px;
		width: 80px;
		height: 40px;
		background-color: steelblue;
	}
</style>

Note: The contentBoxSize binding is currently broken in Svelte 4: #8583

Logs

No response

System Info

See repl.

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions