[whatwg] Simplified <picture> element draft

[Kornel Lesiński]

On Sat, 04 Jan 2014 06:36:27 -0000, Adam Barth <w3c at adambarth.com> wrote:

> In order for the HTMLPreloadScanner to issue preload requests for
> <picture> elements, the HTMLPreloadScanner would need to be able to
> evaluate arbitrary media requests.  That's difficult to do without
> joining the main thread because the media query engine works only on
> the main thread.

Solution I've suggested originally was that when the selection algorithm  
encounters a media query it cannot evaluate yet, it aborts selection,  
waits until conditions change and retries selection form the beginning.

This means that:

  * all images that can be selected by the preloader will be selected, and  
they'll be selected as soon as it is possible,
  * browser will never load any irrelevant image,
  * browsers can optimize when and which MQs match without affecting  
correctness.


For example:

    <picture>
        <source media="resolution:2dppx" src=first>
        <source media="max-width:9999px" src=second>
        <source media="super-complex-media-query-to-evaluate:  
on-main-thread-only" src=third>
    </picture>

in an <iframe> without layout.

1. If you know resolution and the first MQ matches, then load src=first  
immediately. Done!
2. If you don't know viewport size then wait until any conditions change  
(i.e. either viewport size becomes known OR resolution changes) and go to  
step 1.
3. If the second MQ matches then load src=second immediately (might still  
happen in the preloader). Done!
4. If you can't evaluate complex MQ in the preloader, then wait until  
control goes back to the main thread and go to step 1.

By "wait" here I mean the selection algorithm is deferred for the given  
picture only, and nothing else is blocked.


Equivalent of it in the current spec would be something like this:

Before step 7 in http://picture.responsiveimages.org/#update-source-sets  
add:

> 6b. If child has a media attribute, and its value is a valid media query  
> which UA temporarily cannot evaluate then exit this sub-algorithm and  
> /select an image source/ again after a UA-specific delay.


"temporarily cannot evaluate" is completely up to UA. It may mean unknown  
sizes in iframes, it may mean non-trivial queries in the preloader, etc.

"UA-specific delay" could be waiting for any media query in the <picture>  
to change, or it could simply mean ignoring the picture in the preloader  
and doing evaluation properly on the main thread/when layout is  
calculated, etc.

"exit this sub-algorithm" will either cause an earlier source that has  
unambiguously matched to be loaded or empty source set will cause  
selection algorithm to do nothing.

-- 
regards, Kornel