[css-images-4] Add object-view-box and object-overflow. #7058

Author: tabatkins

css-images-4/Overview.bs

@@ -1557,13 +1557,13 @@ Conic Gradient Examples</h4>
 	</div>
 
 <!--
-████████  ████████ ████████  ████████    ███    ████████ ████ ██    ██  ██████
-██     ██ ██       ██     ██ ██         ██ ██      ██     ██  ███   ██ ██    ██
-██     ██ ██       ██     ██ ██        ██   ██     ██     ██  ████  ██ ██
-████████  ██████   ████████  ██████   ██     ██    ██     ██  ██ ██ ██ ██   ████
-██   ██   ██       ██        ██       █████████    ██     ██  ██  ████ ██    ██
-██    ██  ██       ██        ██       ██     ██    ██     ██  ██   ███ ██    ██
-██     ██ ████████ ██        ████████ ██     ██    ██    ████ ██    ██  ██████
+████████  ████████ ████████  ████████    ███    ████████
+██     ██ ██       ██     ██ ██         ██ ██      ██
+██     ██ ██       ██     ██ ██        ██   ██     ██
+████████  ██████   ████████  ██████   ██     ██    ██
+██   ██   ██       ██        ██       █████████    ██
+██    ██  ██       ██        ██       ██     ██    ██
+██     ██ ████████ ██        ████████ ██     ██    ██
 -->
 
 <h3 id='repeating-gradients'>
@@ -1921,6 +1921,84 @@ Color Stop “Fixup”</h4>
 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,
+	similar to the <{svg/viewBox|&lt;svg viewBox>}> attribute,
+	zooming or panning over the element's contents.
+
+	<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.
+			(Notably, 'object-fit', 'object-position',
+			and the resolution of the element's own size in layout
+			all use the view box's size instead.)
+
+			When the element is painted,
+			its contents are scaled and translated
+			such that the portion of the element originally covered by the view box
+			(relative to its original [=natural sizes=])
+			exactly fills the [=concrete object size=]
+			determined for 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>
+
+
 <!--
  ███████  ████████        ██ ████████  ██████  ████████         ████████ ████ ████████
 ██     ██ ██     ██       ██ ██       ██    ██    ██            ██        ██     ██
@@ -2026,17 +2104,68 @@ Sizing Objects: the 'object-fit' property {#the-object-fit}
 	(a term defined by SVG)
 	and then uses the values of several attributes on the root <code>&lt;svg></code> element to determine how to draw itself.
 
+
+Overflowing Objects: the 'object-overflow' property {#the-object-overflow}
+--------------------------------------------------------------------------
+
+	<pre class=propdef>
+	Name: object-overflow
+	Value: clip | visible
+	Initial: clip
+	Applies to: replaced elements
+	Inherited: no
+	Percentages: n/a
+	Computed value: as specified
+	Animation type: discrete
+	</pre>
+
+	The 'object-overflow' property specifies
+	how replaced elements render any content
+	that overflows their [=content box=].
+
+	<dl dfn-type=value dfn-for=object-overflow>
+		: <dfn>clip</dfn>
+		:: The box's content is clipped to its [=content box=],
+			and the UA must not allow the content to be scrolled by any means
+			to display the overflowing content.
+
+			Note: Replaced elements can render their contents in any way they wish;
+			for example, the content <em>itself</em> might be scrollable
+			and provide scrollbars and similar affordances,
+			such as the contents of an HTML <{iframe}> element.
+			But if that content rectangle overflows the content box
+			of the element,
+			<em>it</em> must not expose the overflowing parts of itself
+			in any way.
+
+		: <dfn>visible</dfn>
+		:: There is no special handling of overflow;
+			that is, the box’s content is rendered outside the box
+			if positioned there.
+			The box is not a [=scroll container=].
+
+			Any content that as a result
+			is rendered outside of the [=content box=]
+			is treated as [=ink overflow=].
+	</dl>
+
+	<div class=example>
+		Issue: example here, showing a combo with object-view-box to get an image of something with a built-in shadow to render the shadow outside of the box.
+	</div>
+
+
+
 Image Processing {#image-processing}
 ====================================
 
 <!--
-████ ██     ██    ███     ██████   ████████         ████████  ████████  ██████   ███████  ██       ██     ██ ████████ ████  ███████  ██    ██
- ██  ███   ███   ██ ██   ██    ██  ██               ██     ██ ██       ██    ██ ██     ██ ██       ██     ██    ██     ██  ██     ██ ███   ██
- ██  ████ ████  ██   ██  ██        ██               ██     ██ ██       ██       ██     ██ ██       ██     ██    ██     ██  ██     ██ ████  ██
- ██  ██ ███ ██ ██     ██ ██   ████ ██████   ███████ ████████  ██████    ██████  ██     ██ ██       ██     ██    ██     ██  ██     ██ ██ ██ ██
- ██  ██     ██ █████████ ██    ██  ██               ██   ██   ██             ██ ██     ██ ██       ██     ██    ██     ██  ██     ██ ██  ████
- ██  ██     ██ ██     ██ ██    ██  ██               ██    ██  ██       ██    ██ ██     ██ ██       ██     ██    ██     ██  ██     ██ ██   ███
-████ ██     ██ ██     ██  ██████   ████████         ██     ██ ████████  ██████   ███████  ████████  ███████     ██    ████  ███████  ██    ██
+████         ████████  ████████  ██████
+ ██          ██     ██ ██       ██    ██
+ ██          ██     ██ ██       ██
+ ██  ███████ ████████  ██████    ██████
+ ██          ██   ██   ██             ██
+ ██          ██    ██  ██       ██    ██
+████         ██     ██ ████████  ██████
 -->
 
 Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolution}