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

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

Received on Friday, 30 November 2012 05:58:30 UTC