W3C home > Mailing lists > Public > www-style@w3.org > December 2012

Re: [css3-background] unbound background-clip from -origin in background shorthand

From: Gérard Talbot <www-style@gtalbot.org>
Date: Sat, 1 Dec 2012 15:46:28 -0500
Message-ID: <6fb20d3c64d31ffcb13dd4458b3147f2.squirrel@ed-sh-cp3.entirelydigital.com>
To: "Dirk Schulze" <dschulze@adobe.com>
Cc: "www-style mailing list" <www-style@w3.org>

Le Ven 30 novembre 2012 16:57, Dirk Schulze a écrit :
>
> On Nov 30, 2012, at 10:49 AM, Gérard Talbot <www-style@gtalbot.org> wrote:
>
>>
>> Le Ven 30 novembre 2012 0:57, Dirk Schulze a écrit :
>>> Had problems with emails. Apologize if I send the same content twice.
>>>
>>> Hi,
>>>
>>> The CSS WG discussed the syntax of the short hand 'background' this
>>> Wednesday because of my initial mail about the independent order of
>>> 'background-origin' and 'background-clip' in the short hand. I had an
>>> action to come up with a test file. I may not be able to create a
>>> Testharness.js test till tomorrow. That is why I add a standalone test
>>> in
>>> the attachment.
>>>
>>> Test results:
>>> IE 10, Opera next, Chromium, WebKit nightly allow independent order of
>>> 'background-origin' and 'background-clip' in an interoperable way. You
>>> will see this on various pass messages at the beginning.
>>> Firefox nightly supports the syntax described in the current version of
>>> the spec[1] and therefore fails on the attached test.
>>>
>>> Greetings,
>>> Dirk
>>>
>>> [1]
>>> http://www.w3.org/TR/2012/CR-css3-background-20120724/#the-background
>>>
>>
>> Dirk,
>>
>> I got curious about your post, then loaded your code into a text editor
>> and made various tunings:
>>
>> http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/Unbound-background-clip-from-shorthand.html
>
> This is really awesome, thank you very much! I wrote some more tests.
> Could you add them to your test file as well please?

Done.

http://www.gtalbot.org/BrowserBugsSection/CSS3Backgrounds/Unbound-background-clip-from-shorthand.html

I added some of your descriptive comments into the output string. This
helps distinguish sets of tests, different series of tests and what's
being tested.

Gérard

>
> 	// Test if one specified <box> value sets background-origin and
> background-clip.
> 	[ "none repeat scroll 0% 0% / auto content-box", "content-box",
> "content-box"],
> 	[ "none repeat scroll content-box 0% 0% / auto", "content-box",
> "content-box"],
> 	[ "none repeat content-box scroll 0% 0% / auto", "content-box",
> "content-box"],
> 	[ "none content-box repeat scroll 0% 0% / auto", "content-box",
> "content-box"],
> 	[ "content-box none repeat scroll 0% 0% / auto", "content-box",
> "content-box"],
>
> 	// Negative tests for on specified <box> value. background-position and
> background-size
> 	// should not be interrupted.
> 	[ "none repeat scroll 0% 0% / content-box auto", "padding-box",
> "border-box"],
> 	[ "none repeat scroll 0% 0% content-box / auto", "padding-box",
> "border-box"],
> 	[ "none repeat scroll 0% content-box 0% / auto", "padding-box",
> "border-box"],
>
> 	// Test that a third <box> value has no affect (error prone).
> 	[ "padding-box none padding-box repeat scroll 0% 0% / auto content-box",
> "padding-box", "border-box"],
> 	[ "padding-box none repeat padding-box scroll 0% 0% / auto content-box",
> "padding-box", "border-box"],
> 	[ "padding-box none repeat scroll padding-box 0% 0% / auto content-box",
> "padding-box", "border-box"],
> 	[ "padding-box none repeat scroll 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none padding-box repeat scroll 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none repeat padding-box scroll 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none repeat scroll padding-box 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none padding-box repeat padding-box scroll 0% 0% / auto content-box",
> "padding-box", "border-box"],
> 	[ "none padding-box repeat scroll padding-box 0% 0% / auto content-box",
> "padding-box", "border-box"],
> 	[ "none padding-box repeat scroll 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none repeat padding-box scroll 0% 0% / auto padding-box content-box",
> "padding-box", "border-box"],
> 	[ "none repeat padding-box scroll padding-box 0% 0% / auto content-box",
> "padding-box", "border-box"]
>
> All browsers pass these tests.
> The first set with one <box> value is accepted according to current
> background spec. All browsers pass.
> The second set, sets the <box> value between background-position and
> background-size, which is not allowed. All browsers pass.
> The third set, specifies three <box> values, which is not allowed to the
> current spec. All browsers pass.
>
> This is not really relevant to the request to change the syntax, but shows
> that IE 10, Chromium / WebKit nightly and Opera are consistent in their
> behavior and interoperable. FF is the only browser following the spec, and
> therefore not interoperable with the other browsers.
>
> Greetings,
> Dirk
>
>
>>
>> Gérard
>>
>>> <!DOCTYPE html>
>>> <html lang="en">
>>> <head>
>>>
>>> </head>
>>> <body>
>>> 	<div id="b"></div>
>>>  <script>
>>> var backgroundPropertyValues = [
>>> 	// Test if background-origin and background-clip are accepted if
>>> separated. If yes, the values
>>> 	// for background-origin should change to "content-box" and
>>> background-clip to "padding-box".
>>> 	// [ shorthand value,	background-origin getComputedStyle,
>>> background-clip
>>> getComputedStyle]
>>> 	[ "none repeat scroll 0% 0% / auto content-box padding-box",
>>> "content-box", "padding-box"],
>>> 	[ "content-box none repeat scroll 0% 0% / auto padding-box",
>>> "content-box", "padding-box"],
>>> 	[ "none content-box repeat scroll 0% 0% / auto padding-box",
>>> "content-box", "padding-box"],
>>> 	[ "none repeat scroll content-box 0% 0% / auto padding-box",
>>> "content-box", "padding-box"],
>>> 	[ "content-box none padding-box repeat scroll 0% 0% / auto",
>>> "content-box", "padding-box"],
>>> 	[ "content-box none repeat padding-box scroll 0% 0% / auto",
>>> "content-box", "padding-box"],
>>> 	[ "content-box none repeat scroll padding-box 0% 0% / auto",
>>> "content-box", "padding-box"],
>>> 	[ "none content-box repeat padding-box scroll 0% 0% / auto",
>>> "content-box", "padding-box"],
>>> 	[ "none content-box repeat scroll padding-box 0% 0% / auto",
>>> "content-box", "padding-box"],
>>> 	[ "none repeat content-box scroll padding-box 0% 0% / auto",
>>> "content-box", "padding-box"],
>>>
>>> 	// Test that background-origin and background-clip are not accepted
>>> between background-postion
>>> 	// and background-size. background-origin and background-clip should
>>> keep
>>> the initial values.
>>> 	[ "none repeat scroll 0% 0% / content-box auto padding-box",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll 0% 0% content-box / auto padding-box",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll 0% content-box 0% / auto padding-box",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll 0% content-box 0% / padding-box auto",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll content-box 0% 0% / padding-box auto",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll content-box 0% 0% padding-box / auto",
>>> "padding-box", "border-box"],
>>> 	[ "none repeat scroll content-box 0% padding-box 0% / auto",
>>> "padding-box", "border-box"]
>>> ];
>>>
>>> var div = document.getElementById('b');
>>> var string = "";
>>> for (var i = 0; i < backgroundPropertyValues.length; i++) {
>>> 	div.style.background = backgroundPropertyValues[i][0];
>>> 	var cs = getComputedStyle(div);
>>> 	string += "Test: "+backgroundPropertyValues[i][0]+".<br>";
>>> 	if(cs.backgroundOrigin == backgroundPropertyValues[i][1])
>>> 		string += "Passed. background-origin was
>>> '"+backgroundPropertyValues[i][1]+"'.<br>";
>>> 	else
>>> 		string += "Failed: Expected '"+backgroundPropertyValues[i][1]+"' was
>>> '"+cs.backgroundOrigin+"'.<br>";
>>> 	if(cs.backgroundClip == backgroundPropertyValues[i][2])
>>> 		string += "Passed. background-clip was
>>> '"+backgroundPropertyValues[i][2]+"'.<br>";
>>> 	else
>>> 		string += "Failed: Expected '"+backgroundPropertyValues[i][2]+"' was
>>> '"+cs.backgroundClip+"'.<br>";
>>> 	// Reset short and long hand.
>>> 	div.style.background = "none";
>>> 	string += "<br>";
>>> }
>>> div.innerHTML = string;
>>>  </script>
>>> </body>
>>> </html>
>>>
>>>
>>>
>>> On Nov 23, 2012, at 8:57 AM, Tab Atkins Jr. <jackalmage@gmail.com>
>>> wrote:
>>>
>>>> On Fri, Nov 23, 2012 at 7:47 AM, Dirk Schulze <dschulze@adobe.com>
>>>> wrote:
>>>>> The current syntax of the shorthand requires browsers to bound the
>>>>> two
>>>>> property values for background-clip and background-origin[1]:
>>>>>
>>>>>       <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? ||
>>>>> <repeat-style> || <attachment> || <box>{1,2}
>>>>>
>>>>> Making a short test, it seems that most browsers (with exception of
>>>>> FF)
>>>>> support to have a different order[2]:
>>>>>
>>>>>       background: border-box none content-box;
>>>>>
>>>>> The browser stay consistent with the wording: "If two values are
>>>>> present, then the first sets ‘background-origin’ and the second
>>>>> ‘background-clip’."
>>>>>
>>>>> Should css3-backgrounds be lees restrictive?
>>>>
>>>> If IE, Opera, and WebKit all do it, then it seems reasonable to relax
>>>> the grammar.
>>>>
>>>> ~TJ
>>>
>>>
>>>
>>
>>
>> --
>> CSS 2.1 Test suite RC6, March 23rd 2011
>> http://test.csswg.org/suites/css2.1/20110323/html4/toc.html
>>
>> Contributions to CSS 2.1 test suite
>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/
>>
>> Web authors' contributions to CSS 2.1 test suite
>> http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
>>
>
>
>


-- 
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html

Contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/

Web authors' contributions to CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/web-authors-contributions-css21-testsuite.html
Received on Saturday, 1 December 2012 20:47:05 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:21:03 GMT