diff --git a/source b/source index 1107789f5dc..417c5f542b6 100644 --- a/source +++ b/source @@ -3704,6 +3704,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'vw' unit
  • The 'in' unit
  • The 'px' unit
    • +
  • The 'pt' unit
  • The 'attr()' function
  • The math functions
    • @@ -28054,14 +28055,30 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...Each img element has a last selected source, which must initially be null.

    -

    Each image request has a current pixel density, which must initially be undefined.

    +

    Each image request has a current pixel density, which must initially be + 1.

    + +

    Each image request has preferred density-corrected dimensions, which is + either a struct consisting of a width and a height or is null. It must initially be null.

    + +

    To determine the density-corrected intrinsic width and height of an + img element img:

    + +
      +

    1. Let dim be img's current request's preferred + density-corrected dimensions.

      2. -

      When an img element has a current pixel density that is not 1.0, the - element's image data must be treated as if its resolution, in device pixels per CSS pixels, was the current pixel density. The image's - density-corrected intrinsic width and height are the intrinsic width and height after taking into account the current pixel - density.

      +

    2. If dim is null, set dim to img's intrinsic + dimensions.

      3. + +

    3. Set dim's width to dim's width divided by img's + current request's current pixel density.

      4. + +

    4. Set dim's height to dim's height divided by img's + current request's current pixel density.

      5. + +

    5. Return dim.

      6. +

    For example, if the current pixel density is 3.125, that means that there are 300 device pixels per CSS inch, and thus if the image @@ -28345,7 +28362,8 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...state is completely available.

    -

  • Update the presentation of the image appropriately.

    • +

  • Prepare current request + for presentation given img.

  • Set current request's current pixel density to selected pixel density.

    • @@ -28583,13 +28601,16 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...Each task that is queued by the networking task source while the image is being - fetched must update the presentation of the image, but as each new body part comes in, it must - replace the previous image. Once one body part has been completely decoded, the user agent - must set the img element's current request's state to completely available and - queue an element task on the DOM manipulation task source given the - img element to fire an event named load at the img element.

    + fetched must update the presentation of the image, but as each new body part comes in, if the + user agent is able to determine the image's width and height, it must prepare the img element's current request + for presentation given the img element and replace the previous image. + Once one body part has been completely decoded, the user agent must set the img + element's current request's state to completely available and queue an element task on the + DOM manipulation task source given the img element to fire an event named load + at the img element.

    @@ -28609,8 +28630,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ....

  • Otherwise, if the user agent is able to determine image request's image's - width and height, and image request is current request, update the - img element's presentation appropriately and set image request's + width and height, and image request is current request, prepare image request for + presentation given the img element and set image request's state to partially available.

    • @@ -28653,7 +28675,8 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

    If image request is the pending request, abort the image request for the current request, upgrade the pending request to the current request and - update the img element's presentation appropriately.

    + prepare image request for + presentation given the img element.

  • Set image request to the completely available state.

    • @@ -28687,7 +28710,6 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

  • Forget image request's image data, if any.

    • -

  • Abort any instance of the fetching algorithm for image request, discarding any pending tasks generated by that algorithm.

    • @@ -28701,6 +28723,74 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ... +
    Preparing an image for presentation
    + +

    To prepare an image for presentation for an image request + req given image element img:

    + +
      +

    1. Let exifTagMap be the EXIF tags obtained from req's image data, as defined by the relevant codec.

      2. + +

    2. Let physicalWidth and physicalHeight be the width and height + obtained from req's image data, as defined by the + relevant codec.

      3. + +

    3. Let dimX be the value of exifTagMap's tag 0xA002 (PixelXDimension).

      4. + +

    4. Let dimY be the value of exifTagMap's tag 0xA003 (PixelYDimension).

      5. + +

    5. Let resX be the value of exifTagMap's tag 0x011A (XResolution).

      6. + +

    6. Let resY be the value of exifTagMap's tag 0x011B (YResolution).

      7. + +

    7. Let resUnit be the value of exifTagMap's tag 0x0128 (ResolutionUnit).

      8. + +

    8. If either dimX or dimY is not a positive integer, then + return.

      9. + +

    9. If either resX or resY is not a positive floating-point number, then + return.

      10. + +

    10. If resUnit is not equal to 2 (Inch), then return.

      11. + +

    11. Let widthFromDensity be the value of physicalWidth, multiplied by 72 + and divided by resX.

      12. + +

    12. Let heightFromDensity be the value of physicalHeight, multiplied by + 72 and divided by resY.

      13. + +

    13. If widthFromDensity is not equal to dimX or + heightFromDensity is not equal to dimY, then return.

      14. + +
    14. +

      If req's image data is + CORS-cross-origin, then set img's intrinsic dimensions to + dimX and dimY, scale img's pixel data accordingly, and return.

      +
      15. + +

    15. Set req's preferred density-corrected dimensions to a struct with + its width set to dimX and its height set to dimY.

      16. + +

    16. Update req's img element's presentation appropriately.

      17. +
    + +

    Resolution in EXIF is equivalent to CSS points per + inch, therefore 72 is the base for computing size from resolution.

    + +

    It is not yet specified what would be the case if EXIF arrives after the image is + already presented. See issue + #4929.

    + + +
    Selecting an image source

    When asked to select an image source for a given img or @@ -29277,8 +29367,9 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...pending request be null and abort these steps.

    -

  • Let the img element's last selected source be selected source - and the img element's current pixel density be selected pixel density.

    • +

  • Let the img element's last selected source be selected + source and the img element's current pixel density be + selected pixel density.

  • Set the image request's state to completely available.

    • @@ -29288,7 +29379,8 @@ was an English <a href="/wiki/Music_hall">music hall</a> singer, ...

    Upgrade the pending request to the current request.

    -

  • Update the img element's presentation appropriately.

    • +

  • Prepare image request for + presentation given the img element.

  • Fire an event named load at the img element.

    • @@ -125457,6 +125549,7 @@ INSERT INTERFACES HERE Niklas Gögge, Noah Mendelsohn, Noah Slater, + Noam Rosenthal, Noel Gordon, Nolan Waite, NoozNooz42,