- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Mon, 25 Oct 2010 20:41:03 -0700
- To: Jonas Sicking <jonas@sicking.cc>
- Cc: Anne van Kesteren <annevk@opera.com>, Arun Ranganathan <arun@mozilla.com>, public-webapps <public-webapps@w3.org>, Arthur Barstow <art.barstow@nokia.com>, Adam Barth <abarth@gmail.com>, Darin Fisher <darin@google.com>
On Mon, Oct 25, 2010 at 7:48 PM, Jonas Sicking <jonas@sicking.cc> wrote:
> On Mon, Oct 25, 2010 at 6:10 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>> On Mon, Oct 25, 2010 at 5:59 PM, Jonas Sicking <jonas@sicking.cc> wrote:
>>> However it still leaves my original statement unanswered:
>>>
>>> "Like I said, I think creating an OM that covers all the cases here
>>> would create something very complex. I'd love to see a useful proposal
>>> for <http://dev.w3.org/csswg/css3-images/>"
>>
>> I outlined how it would work above, I thought. Any property that can
>> take a <url> should, in the Values API, be able to take a url object
>> like we're describing here. Any function that can take a <url> as an
>> argument should do the same. The exact interface for exposing
>> function arguments hasn't been nailed down yet, but once you can do
>> so, using it should be the same as using an ordinary property which
>> just takes a <url>.
>
> The question is, how do you use a DOMURL together with all the other
> features of <image>. Using the createObjectURL proposal I can do:
>
> elem.style.backgroundImage =
> "image('" + createObjectURL(file1) + "' snap 150dpi)," +
> "image('" + createObjectURL(file2) + "' 150dpi, radial-gradient(...))";
>
> How would I do the equivalent if createObjectURL isn't available?
*Definitely* not with the current CSSOM. String concatenation is
disgusting API design in the first place.
Anne hasn't proposed a way to handle functions and their arguments yet
in the Values API, so I can only speculate. Particularly, initially
setting a new function is a bit of a mystery. I could think of a few
possible ways to do it, though.
1)
elem.style.values.backgroundImage.function = new
CSSFunctionImage([file1, 'snap', {dpi:150}], [file2, {dpi:150}], new
CSSFunctionRadialGradient(...));
2)
elem.style.backgroundImage = "image(url(404) snap 150dpi, url(404)
150dpi, radial-gradient(...))";
elem.style.values.backgroundImage.function.a[0].url = file1;
elem.style.values.backgroundImage.function.a[1].url = file2;
Both of these are off the top of my head, so don't read too much into
them. The point is just to illustrate that the issue is solveable.
~TJ
Received on Tuesday, 26 October 2010 03:41:56 UTC