Overview.bs

<pre class='metadata'>
Title: CSS Images Module Level 5
Status: ED
Work Status: Exploring
Shortname: css-images
Level: 5
Group: csswg
ED: https://drafts.csswg.org/css-images-5/
TR: https://www.w3.org/TR/css-images-5/
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
Editor: Lea Verou, Invited Expert, http://lea.verou.me/about, w3cid 52258
Abstract: This module contains the features of CSS level 4 relating to the <<image>> type and replaced elements.
	It includes and extends the functionality of CSS level 2 [[CSS2]] and in the previous level of this specification [[css-images-4]].
Default Highlight: css
</pre>

Introduction {#intro}
=====================

This is a diff spec over [[!css-images-4]].

Sizing Images and Objects in CSS {#sizing}
==========================================

<!--
 ███████          ██     ██         ████████
██     ██         ██     ██         ██     ██
██     ██         ██     ██         ██     ██
██     ██ ███████ ██     ██ ███████ ████████
██     ██          ██   ██          ██     ██
██     ██           ██ ██           ██     ██
 ███████             ███            ████████
-->

Setting The Viewbox: the 'object-view-box' property {#the-object-view-box}
--------------------------------------------------------------------------

	<pre class=propdef>
	Name: object-view-box
	Value: none | <<basic-shape-rect>>
	Initial: none
	Applies to: [=replaced elements=]
	Inherited: no
	Percentages: n/a
	Computed value: specified keyword, or computed <basic-shape> function
	Animation Type: as <basic-shape> if possible, otherwise discrete
	</pre>

	The 'object-view-box' property
	specifies a "view box" over an element,
	which allows zooming or panning over the element's contents.
	It maps to the <{svg/viewBox|&lt;svg viewBox>}> attribute in SVG. [[SVG2]]

	ISSUE: Make sure behavior is <a href="https://github.com/w3c/csswg-drafts/issues/7058#issuecomment-1057553833">properly consistent for SVG</a>.

	<dl dfn-type=value dfn-for=object-view-box>
		: <dfn>none</dfn>
		::
			The element does not have a view box.

		: <dfn><<basic-shape-rect>></dfn>
		::
			If the element does not have both a [=natural width=]
			and a [=natural height=],
			this value has no effect,
			similar to ''object-view-box/none''.

			Otherwise, specifies a view box for the element.

			First, resolve the <<basic-shape-rect>>
			against a [=&lt;basic-shape>/reference box=] formed by the element's
			[=natural sizes=]
			to obtain the element's view box.

			For all purposes,
			the element is now treated as having [=natural sizes=]
			equal to the view box's width and height.
			If the element had a [=natural aspect ratio=],
			it's now treated as instead having the same ratio as the view box.
			Further adjustments to the size/position of the element's contents,
			such as 'object-position' or 'object-fit',
			are similarly performed on the view box instead.

			When the element is painted,
			its contents are scaled and translated
			such that the element's contents
			retain the same position and size,
			relative to the view box's final size and position,
			that they had when the view box was determined (above).

			Issue: Have not yet defined what happens if the view box is zero-area.
			It's an error case,
			so precise behavior isn't important;
			just need to see what impls want to do about it.
	</dl>

	Note: Some replaced elements might have a built-in notion of a "view box",
	such as the <{svg}> element.
	Unless otherwise specified,
	this property does not interact with such notions;
	the built-in notion has its effect as normal,
	producing a replaced element with [=natural sizes=],
	then this property applies on top of that.

	<div class=example>
		Issue: example here. Need a basic one showing off zooming in, one showing off zooming out, and one showing off interaction with object-fit to display how the parts outside the viewbox can still be painted.
	</div>