csswg-drafts/css-images-5/Overview.bs at css-forms-indeterminate-checkmark · lukewarlow/csswg-drafts · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<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, 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 <<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
Ignore MDN Failure: the-image-orientation
Ignore MDN Failure: the-image-rendering
Ignore MDN Failure: the-object-fit
Ignore MDN Failure: the-object-position
Ignore MDN Failure: gradients
Ignore MDN Failure: image-values
Ignore MDN Failure: radial-gradients
Ignore MDN Failure: repeating-gradients
</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 [=<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>

Privacy Considerations {#privacy}
=================================

No new privacy considerations have been reported on this specification.

Security Considerations {#security}
===================================

No new security considerations have been reported on this specification.