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, Apple, 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 <> 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
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}
--------------------------------------------------------------------------
Name: object-view-box
Value: none | <>
Initial: none
Applies to: [=replaced elements=]
Inherited: no
Percentages: n/a
Computed value: specified keyword, or computed function
Animation Type: as if possible, otherwise discrete
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|<svg viewBox>}> attribute in SVG. [[SVG2]]
ISSUE: Make sure behavior is properly consistent for SVG.
: none
::
The element does not have a view box.
: <>
::
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 <>
against a [=<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.
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.
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.