CSS Images Module Level 5

1. Introduction

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

2. 2D Image Values: the <image> type

...

2.1. Image Fallbacks and Annotations: the image() notation

[css-images-4] defines a simple form of the image() function, which generates a solid-color dimensionless image. This level introduces a number of additional functions.

The image() function allows an author to:

• use media fragments to clip out a portion of an image

• use a solid color as an image

• fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded

• automatically respect the image orientation specified in the image’s metadata

The image() notation is defined as:

image() = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-tags> = [ ltr | rtl ]
<image-src> = [ <url> | <string> ]

A <string> used in image() represents a <url>. As usual for URLs in CSS, relative URLs are resolved to an absolute URL (as described in Values & Units [CSS-VALUES-3]) when a specified image() value is computed.

If the image has an orientation specified in its metadata, such as EXIF, the UA must rotate or flip the image to correctly orient it as the metadata specifies.

2.1.1. Image Fallbacks

If both a URL and a <color> are specified in image(), then whenever the URL represents an invalid image or loading image, the image() function renders as if the URL were not specified at all; it generates a solid-color image as specified in § 2.1.3 Solid-color Images.

If just a URL is specified (no <color>) and it represents an invalid image or loading image, the image() function represents the same.

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

2.1.2. Image Fragments

When a URL specified in image() represents a portion of a resource (e.g. by the use of media fragment identifiers) that portion is clipped out of its context and used as a standalone image.

background-image: image('sprites.svg#xywh=40,0,20,20')

So that authors can take advantage of CSS’s forwards-compatible parsing rules to provide a fallback for image slices, implementations that support the image() notation must support the xywh=#,#,#,# form of media fragment identifiers for images specified via image(). [MEDIA-FRAGS]

background-image: url('swirl.png'); /* old UAs */
background-image: image('sprites.png#xywh=10,30,60,20'); /* new UAs */

If a URL uses a fragment identifier syntax that the implementation does not understand, or does not consider valid for that type of image, the URL must be treated as representing an invalid image.

Note: This error-handling is limited to image(), and not in the definition of URL, for legacy compat reasons.

2.1.3. Solid-color Images

If the image() function is specified with only a <color> argument (no URL), it represents a solid-color image of the specified color with no natural dimensions.

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

2.1.4. Bidi-sensitive Images

Before listing any <image-src>s, the author may specify a directionality for the image, similar to adding a dir attribute to an element in HTML. If a directional image is used on or in an element with opposite direction, the image must be flipped in the inline direction (as if it was transformed by, e.g., scaleX(-1), if the inline direction is the X axis).

Note: Absent this declaration, images default to no directionality at all, and thus don’t care about the directionality of the surrounding element.

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>My bullet is on the left!</li>
  <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
</ul>

⇒ My bullet is on the left!
  !THGIR EHT NO SI TELLUB YM ⇐

3. Sizing Images and Objects in CSS

3.1. Setting The Viewbox: the object-view-box property

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> attribute in SVG. [SVG2]

Make sure behavior is properly consistent for SVG.

none

The element does not have a view box.

<basic-shape-rect>

If the element does not have both a natural width and a natural height, this value has no effect, similar to none.

Otherwise, specifies a view box for the element.

First, resolve the <basic-shape-rect> against a 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).

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.

4. Privacy Considerations

No new privacy considerations have been reported on this specification.

5. Security Considerations

No new security considerations have been reported on this specification.