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

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?

	// 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
>

Received on Friday, 30 November 2012 21:57:28 UTC