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

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

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

Received on Friday, 30 November 2012 18:49:53 UTC