Dynamic styles

Where do the old/new content width/height come from?

TL;DR

If it’s the root view transition then it’s the snapshot containing block width/height. Otherwise it’s probably the width/height of the element’s border box, unless you’re using box-sizing: content-box; because you’re a hipster.

TS;WM

Let (oldContentWidth, oldContentHeight) be (capturedElement’s old width, capturedElement’s old height) if capturedElement’s old box properties is null, otherwise capturedElement’s old box properties’s content box’s size.

if (capturedElement === document.documentElement) {
	capturedElement.old.width = snapshotContainingBlock.width;
	capturedElement.old.height = snapshotContainingBlock.height;
} else {
	capturedElement.old.width = capturedElement.old.borderBox.width;
	capturedElement.old.height = capturedElement.old.borderBox.height;
}

if (capturedElement.old.boxProperties === null) {
	oldContentWidth = capturedElement.old.width;
	oldContentHeight = capturedElement.old.height;
} else {
	oldContentWidth = capturedElement.old.contentBox.width;
	oldContentHeight = capturedElement.old.contentBox.height;
}

Let (newContentWidth, newContentHeight) be (width, height) if new box properties is null, otherwise capturedElement’s new box properties’s content box’s size.

if (capturedElement.new.boxSizing === 'content-box') {
	width = capturedElement.new.contentBox.width;
	height = capturedElement.new.contentBox.height;
} else {
	width = capturedElement.new.borderBox.width;
	height = capturedElement.new.borderBox.height;
}

if (capturedElement.new.boxProperties === null) {
	newContentWidth = width;
	newContentHeight = height;
} else {
	newContentWidth = capturedElement.new.contentBox.width;
	newContentHeight = capturedElement.new.contentBox.height;
}