Skip to content

Commit 600fd75

Browse files
LeaVerouLeaVerou
committed
[css-images] Move image-resolution to css-images-4, mark image-orientation and gradient interpolation as At Risk. This concludes the edits needed to resolve #1148 
1 parent e732715 commit 600fd75

File tree

2 files changed

+145
-140
lines changed

2 files changed

+145
-140
lines changed

‎css-images-4/Overview.bs

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1351,6 +1351,149 @@ Sizing Images and Objects in CSS {#sizing}
13511351

13521352
Note: No change from [[css3-images]].
13531353

1354+
Image Processing {#image-processing}
1355+
====================================
1356+
1357+
<!--
1358+
████ ██ ██ ███ ██████ ████████ ████████ ████████ ██████ ███████ ██ ██ ██ ████████ ████ ███████ ██ ██
1359+
██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
1360+
██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
1361+
██ ██ ███ ██ ██ ██ ██ ████ ██████ ███████ ████████ ██████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1362+
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
1363+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
1364+
████ ██ ██ ██ ██ ██████ ████████ ██ ██ ████████ ██████ ███████ ████████ ███████ ██ ████ ███████ ██ ██
1365+
-->
1366+
1367+
Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolution}
1368+
-------------------------------------------------------------------------------------
1369+
1370+
The <dfn export>image resolution</dfn> is defined as
1371+
the number of image pixels per unit length,
1372+
e.g., pixels per inch.
1373+
Some image formats can record information about the resolution of images.
1374+
This information can be helpful when determining the actual size of the image in the formatting process.
1375+
However, the information can also be wrong,
1376+
in which case it should be ignored.
1377+
By default, CSS assumes a resolution of one image pixel per CSS ''px'' unit;
1378+
however, the 'image-resolution' property allows using some other resolution.
1379+
1380+
<pre class='propdef'>
1381+
Name: image-resolution
1382+
Value: [ from-image || <<resolution>> ] && snap?
1383+
Initial: 1dppx
1384+
Applies to: all elements
1385+
Inherited: yes
1386+
Media: visual
1387+
Computed value: as specified, except with <<resolution>> possibly altered by computed for ''snap'' (see below)
1388+
Animatable: no
1389+
</pre>
1390+
1391+
Issue: The ''image-set()'' notation can alter the intrinsic resolution of an image,
1392+
which ideally would be automatically honored without having to set this property.
1393+
How should we best address this?
1394+
Change the initial value to ''auto'', meaning "1dppx, unless CSS says otherwise"?
1395+
Say that image-resolution has no effect on images whose resolution was set by something else in CSS?
1396+
Or somehow wordsmithing ''image-set()'' in some way such that it always produces ''1dppx'' images somehow?
1397+
1398+
The 'image-resolution' property specifies the <a>intrinsic resolution</a> of all raster images used in or on the element.
1399+
It affects both content images
1400+
(e.g. replaced elements and generated content)
1401+
and decorative images
1402+
(such as 'background-image').
1403+
The <dfn export>intrinsic resolution</dfn> of an image is used to determine the image's <a>intrinsic dimensions</a>.
1404+
Values have the following meanings:
1405+
1406+
<dl dfn-type=value dfn-for=image-resolution>
1407+
<dt><dfn><<resolution>></dfn>
1408+
<dd>
1409+
Specifies the intrinsic resolution explicitly.
1410+
A "dot" in this case corresponds to a single image pixel.
1411+
1412+
<dt><dfn>from-image</dfn>
1413+
<dd>
1414+
The image's intrinsic resolution is taken as that specified by the image format.
1415+
If the image does not specify its own resolution,
1416+
the explicitly specified resolution is used (if given),
1417+
else it defaults to ''1dppx''.
1418+
1419+
<dt><dfn>snap</dfn>
1420+
<dd>
1421+
If the "snap" keyword is provided,
1422+
the computed <<resolution>> (if any)
1423+
is the specified resolution rounded to the nearest value
1424+
that would map one image pixel to an integer number of device pixels.
1425+
If the resolution is taken from the image,
1426+
then the used intrinsic resolution is the image's native resolution similarly adjusted.
1427+
</dl>
1428+
1429+
As vector formats such as SVG do not have an intrinsic resolution,
1430+
this property has no effect on vector images.
1431+
1432+
<div class='example'>
1433+
Printers tend to have substantially higher resolution than computer monitors;
1434+
due to this, an image that looks fine on the screen may look pixellated when printed out.
1435+
The 'image-resolution' property can be used to embed a high-resolution image into the document
1436+
and maintain an appropriate size,
1437+
ensuring attractive display both on screen and on paper:
1438+
1439+
<pre>
1440+
img.high-res {
1441+
image-resolution: 300dpi;
1442+
}
1443+
</pre>
1444+
1445+
With this set, an image meant to be 5 inches wide at 300dpi
1446+
will actually display as 5in wide;
1447+
without this set,
1448+
the image would display as approximately 15.6in wide
1449+
since the image is 15000 image pixels across,
1450+
and by default CSS displays 96 image pixels per inch.
1451+
</div>
1452+
1453+
1454+
<div class="example">
1455+
Some image formats can encode the image resolution into the image data.
1456+
This rule specifies that the UA should use the image resolution found in the image itself,
1457+
falling back to 1 image pixel per CSS ''px'' unit.
1458+
1459+
<pre>img { image-resolution: from-image }</pre>
1460+
1461+
These rules both specify that the UA should use the image resolution found in the image itself,
1462+
but if the image has no resolution,
1463+
the resolution is set to ''300dpi'' instead of the default ''1dppx''.
1464+
1465+
<pre>
1466+
img { image-resolution: from-image 300dpi }
1467+
img { image-resolution: 300dpi from-image }
1468+
</pre>
1469+
1470+
</div>
1471+
1472+
<div class="example">
1473+
Using this rule, the image resolution is set to 300dpi.
1474+
(The resolution in the image, if any, is ignored.)
1475+
1476+
<pre>img { image-resolution: 300dpi }</pre>
1477+
1478+
This rule, on the other hand,
1479+
if used when the screen's resolution is 96dpi,
1480+
would instead render the image at 288dpi
1481+
(so that 3 image pixels map to 1 device pixel):
1482+
1483+
<pre>img { image-resolution: 300dpi snap; }</pre>
1484+
1485+
The ''snap'' keyword can also be used when the resolution is taken from the image:
1486+
1487+
<pre>img { image-resolution: snap from-image; }</pre>
1488+
1489+
An image declaring itself as 300dpi will,
1490+
in the situation above,
1491+
display at 288dpi
1492+
(3 image pixels per device pixel)
1493+
whereas an image declaring 72dpi will render at 96dpi
1494+
(1 image pixel per device pixel).
1495+
</div>
1496+
13541497
<!--
13551498
████ ██ ██ ████████ ████████ ████████ ████████ ███████ ██ ███ ████████ ████ ███████ ██ ██
13561499
██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██

‎css-images/Overview.bs

Lines changed: 2 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ Work Status: Testing
1010
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/
1111
Editor: Elika J. Etemad / fantasai, Invited Expert, http://fantasai.inkedblade.net/contact, w3cid 35400
1212
Abstract: This module contains the features of CSS level 3 relating to the <<image>> type and replaced elements. It includes and extends the functionality of CSS level 2 [[CSS21]]. The main extensions compared to CSS2.1 are the generalization of the <<url>> type to the <<image>> type, several additions to the <<image>> type, a generic sizing algorithm for images and other replaced content in CSS, definitions for interpolating several <<image>> types, and several properties controlling the interaction of replaced elements and CSS's layout models.
13+
At Risk: 'image-orientation'
14+
At Risk: <a section href="#interpolating-gradients">Interpolating <<gradient>></a>
1315
Issue Tracking: Tracker http://www.w3.org/Style/CSS/Tracker/products/27
1416
Previous Version: https://www.w3.org/TR/2012/CR-css3-images-20120417/
1517
Previous Version: https://www.w3.org/TR/2012/WD-css3-images-20120112/
@@ -1428,146 +1430,6 @@ Positioning Objects: the 'object-position' property {#the-object-position}
14281430
Image Processing {#image-processing}
14291431
====================================
14301432

1431-
<!--
1432-
████ ██ ██ ███ ██████ ████████ ████████ ████████ ██████ ███████ ██ ██ ██ ████████ ████ ███████ ██ ██
1433-
██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██
1434-
██ ████ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
1435-
██ ██ ███ ██ ██ ██ ██ ████ ██████ ███████ ████████ ██████ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
1436-
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
1437-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███
1438-
████ ██ ██ ██ ██ ██████ ████████ ██ ██ ████████ ██████ ███████ ████████ ███████ ██ ████ ███████ ██ ██
1439-
-->
1440-
1441-
Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolution}
1442-
-------------------------------------------------------------------------------------
1443-
1444-
The <dfn export>image resolution</dfn> is defined as
1445-
the number of image pixels per unit length,
1446-
e.g., pixels per inch.
1447-
Some image formats can record information about the resolution of images.
1448-
This information can be helpful when determining the actual size of the image in the formatting process.
1449-
However, the information can also be wrong,
1450-
in which case it should be ignored.
1451-
By default, CSS assumes a resolution of one image pixel per CSS ''px'' unit;
1452-
however, the 'image-resolution' property allows using some other resolution.
1453-
1454-
<pre class='propdef'>
1455-
Name: image-resolution
1456-
Value: [ from-image || <<resolution>> ] && snap?
1457-
Initial: 1dppx
1458-
Applies to: all elements
1459-
Inherited: yes
1460-
Media: visual
1461-
Computed value: as specified, except with <<resolution>> possibly altered by computed for ''snap'' (see below)
1462-
Animatable: no
1463-
</pre>
1464-
1465-
Issue: The ''image-set()'' notation can alter the intrinsic resolution of an image,
1466-
which ideally would be automatically honored without having to set this property.
1467-
How should we best address this?
1468-
Change the initial value to ''auto'', meaning "1dppx, unless CSS says otherwise"?
1469-
Say that image-resolution has no effect on images whose resolution was set by something else in CSS?
1470-
Or somehow wordsmithing ''image-set()'' in some way such that it always produces ''1dppx'' images somehow?
1471-
1472-
The 'image-resolution' property specifies the <a>intrinsic resolution</a> of all raster images used in or on the element.
1473-
It affects both content images
1474-
(e.g. replaced elements and generated content)
1475-
and decorative images
1476-
(such as 'background-image').
1477-
The <dfn export>intrinsic resolution</dfn> of an image is used to determine the image's <a>intrinsic dimensions</a>.
1478-
Values have the following meanings:
1479-
1480-
<dl dfn-type=value dfn-for=image-resolution>
1481-
<dt><dfn><<resolution>></dfn>
1482-
<dd>
1483-
Specifies the intrinsic resolution explicitly.
1484-
A "dot" in this case corresponds to a single image pixel.
1485-
1486-
<dt><dfn>from-image</dfn>
1487-
<dd>
1488-
The image's intrinsic resolution is taken as that specified by the image format.
1489-
If the image does not specify its own resolution,
1490-
the explicitly specified resolution is used (if given),
1491-
else it defaults to ''1dppx''.
1492-
1493-
<dt><dfn>snap</dfn>
1494-
<dd>
1495-
If the "snap" keyword is provided,
1496-
the computed <<resolution>> (if any)
1497-
is the specified resolution rounded to the nearest value
1498-
that would map one image pixel to an integer number of device pixels.
1499-
If the resolution is taken from the image,
1500-
then the used intrinsic resolution is the image's native resolution similarly adjusted.
1501-
</dl>
1502-
1503-
As vector formats such as SVG do not have an intrinsic resolution,
1504-
this property has no effect on vector images.
1505-
1506-
<div class='example'>
1507-
Printers tend to have substantially higher resolution than computer monitors;
1508-
due to this, an image that looks fine on the screen may look pixellated when printed out.
1509-
The 'image-resolution' property can be used to embed a high-resolution image into the document
1510-
and maintain an appropriate size,
1511-
ensuring attractive display both on screen and on paper:
1512-
1513-
<pre>
1514-
img.high-res {
1515-
image-resolution: 300dpi;
1516-
}
1517-
</pre>
1518-
1519-
With this set, an image meant to be 5 inches wide at 300dpi
1520-
will actually display as 5in wide;
1521-
without this set,
1522-
the image would display as approximately 15.6in wide
1523-
since the image is 15000 image pixels across,
1524-
and by default CSS displays 96 image pixels per inch.
1525-
</div>
1526-
1527-
1528-
<div class="example">
1529-
Some image formats can encode the image resolution into the image data.
1530-
This rule specifies that the UA should use the image resolution found in the image itself,
1531-
falling back to 1 image pixel per CSS ''px'' unit.
1532-
1533-
<pre>img { image-resolution: from-image }</pre>
1534-
1535-
These rules both specify that the UA should use the image resolution found in the image itself,
1536-
but if the image has no resolution,
1537-
the resolution is set to ''300dpi'' instead of the default ''1dppx''.
1538-
1539-
<pre>
1540-
img { image-resolution: from-image 300dpi }
1541-
img { image-resolution: 300dpi from-image }
1542-
</pre>
1543-
1544-
</div>
1545-
1546-
<div class="example">
1547-
Using this rule, the image resolution is set to 300dpi.
1548-
(The resolution in the image, if any, is ignored.)
1549-
1550-
<pre>img { image-resolution: 300dpi }</pre>
1551-
1552-
This rule, on the other hand,
1553-
if used when the screen's resolution is 96dpi,
1554-
would instead render the image at 288dpi
1555-
(so that 3 image pixels map to 1 device pixel):
1556-
1557-
<pre>img { image-resolution: 300dpi snap; }</pre>
1558-
1559-
The ''snap'' keyword can also be used when the resolution is taken from the image:
1560-
1561-
<pre>img { image-resolution: snap from-image; }</pre>
1562-
1563-
An image declaring itself as 300dpi will,
1564-
in the situation above,
1565-
display at 288dpi
1566-
(3 image pixels per device pixel)
1567-
whereas an image declaring 72dpi will render at 96dpi
1568-
(1 image pixel per device pixel).
1569-
</div>
1570-
15711433
<!--
15721434
████ ██ ██ ███ ██████ ████████ ███████ ████████ ████ ████████ ██ ██ ████████ ███ ████████ ████ ███████ ██ ██
15731435
██ ███ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██

0 commit comments

Comments
 (0)