417928 - CSS: Background does not extend under border

Reporter

Description

•

16 years ago

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080201 Firefox/2.0.0.12

According to "http://www.w3.org/TR/CSS21/colors.html#background", the calculation of background origin should be border while calculation of background-position starts from padding.  This should NOT require webmasters to set a rule of "-moz-background-origin:border;".

Reproducible: Always

Steps to Reproduce:
1. Go to a site with borders and backgrounds on the same element in both IE and FF
2. Print-Screen in both browsers
3. Zoom in and compare both of them in your favorite image editor (Paint will do)
Actual Results:  
I find that the background is not covered by the border.

Expected Results:  
Firefox should have had backgrounds covered with border.
I expected them to be exactly the same. (Well i don't expect both with cleartype)

Setting the border to transparent does not cover it up either (leaves a line of background of the parent element instead of the same element.) (if it did than Firefox is really broken -- a transparent border should be rendered the same as a real border except it is just transparent!)

Testcase encoded:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>XMenu (WebFX)</title>
<style type="text/css">

html {
	border:		0;
	overflow:	hidden;
}

body {
	border: 0;
	margin: 0;
}


.menuBottom {
	top:		17px;
	height:		1px;
	width:		100%;
	background:	buttonshadow;
	overflow:	hidden;
}

.webfx-menu, .webfx-menu * {
-moz-box-sizing:content-box;
 box-sizing:content-box;
-webkit-box-sizing: content-box;
}

.webfx-menu {
background: url('images/menuback.bmp') repeat-y;
border:1px solid #E8E3E7;
//opacity:0.9;
padding:1px;
position:absolute;
visibility:hidden;
width:300px;
padding: 2px;
z-index:100
}


.webfx-menu-empty {
border:1px solid white;
color:black;
display:block;
font-family:Tahoma,Verdan,Helvetica,Sans-Serfif;
font-size:11px;
padding:2px 5px;
}
.webfx-menu a {
border:1px solid transparent;
color:black;
display:block;
font-family:Tahoma,Verdan,Helvetica,Sans-Serfif;
font-size:11px;
overflow:visible;
padding: 2px 2px 2px 28px;
line-height: 20px;
text-decoration:none;
}
.webfx-menu a:visited, .webfx-menu a:visited:hover {
border:1px solid transparent;
color:black;
}
.webfx-menu a:hover {
border:1px solid transparent;
background: url('images/menuselect.gif') no-repeat;
color:black;
}
*:click {
outline: none;
}

.webfx-menu a .arrow {
border:0pt none;
float:right;
margin-right:3px;
margin-top:4px;
width:3px;
}
.webfx-menu div {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E8E3E7;
font-size:0mm;
height:0pt;
margin:3px 3px 5px 3px;
overflow:hidden;
}
.webfx-menu-bar {
background:#78ACFF none repeat scroll 0%;
font-family:Calibri, Arial Unicode MS, Tahoma, Arial, Verdana,Helvetica,Sans-Serif;
font-size:10pt;
padding:5px;
}
.webfx-menu-bar a, .webfx-menu-bar a:visited {
color:black;
padding: 5px 5px 5px 5px;
width: 200px;
text-decoration:none;
}
.webfx-menu-bar a:hover {
background:#316AC5 none repeat scroll 0%;
color:white;
}
.webfx-menu-bar a .arrow {
border:0pt none;
float:none;
}
.webfx-menu-bar a:active, .webfx-menu-bar a:focus {
//border-color:#0042AE rgb(234, 242, 255) rgb(234, 242, 255) rgb(0, 66, 174);
//border-style:solid;
//border-width:1px;
outline-color:invert;
outline-style:none;
outline-width:medium;
background:#316AC5 none repeat scroll 0%;
color:white;
}
</style>
<script type="text/javascript">
/*----------------------------------------------------------------------------\
|                                 XMenu 1.13                                  |
|-----------------------------------------------------------------------------|
|                          Created by Erik Arvidsson                          |
|                  (http://webfx.eae.net/contact.html#erik)                   |
|                      For WebFX (http://webfx.eae.net/)                      |
|-----------------------------------------------------------------------------|
| An object based tree widget,  emulating the one found in microsoft windows, |
| with persistence using cookies. Works in IE 5+,  Mozilla, Opera 5+,  Safari |
| and Konqueror 3.                                                            |
|-----------------------------------------------------------------------------|
|                  Copyright (c) 2001 - 2007 Erik Arvidsson                   |
|-----------------------------------------------------------------------------|
| Licensed under the Apache License, Version 2.0 (the "License"); you may not |
| use this file except in compliance with the License.  You may obtain a copy |
| of the License at http://www.apache.org/licenses/LICENSE-2.0                |
|                                                                             |
| Unless  required  by  applicable law or  agreed  to  in  writing,  software |
| distributed under the License is distributed on an  "AS IS" BASIS,  WITHOUT |
| WARRANTIES OR  CONDITIONS OF ANY KIND,  either express or implied.  See the |
| License  for the  specific language  governing permissions  and limitations |
| under the License.                                                          |
|-----------------------------------------------------------------------------|
| 2001-01-12 | Original Version Posted.                                       |
| 2001-11-20 | Added hover mode support and removed Opera focus hacks         |
| 2001-12-20 | (1.1) Added auto positioning and some properties to support    |
|            | this.                                                          |
| 2002-08-13 | (1.11) toString used ' for attributes. Changed to " to allow   |
|            | in properties/arguments.                                       |
| 2003-04-27 | (1.12) Added support for target property on menu item/button   |
| 2006-05-28 | Changed license to Apache Software License 2.0.                |
| 2007-07-07 | Added support for safari (hover mode only) and ie7.            |
|-----------------------------------------------------------------------------|
| Created 2001-01-12 | All changes are in the log above. | Updated 2007-07-07 |
\----------------------------------------------------------------------------*/

/* Do not edit anything below this line */
//---------------------------------------------------------------------------------------------------------

// check browsers
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var webkit = /webkit/i.test(ua);
var ie = !opera && /MSIE/.test(ua);
var ie50 = ie && /MSIE 5\.[01234]/.test(ua);
var ie6 = ie && /MSIE [6]/.test(ua);
var ie7 = ie && /MSIE [7]/.test(ua);
var ieBox = ie && (document.compatMode == null || document.compatMode != "CSS1Compat");
if (opera || webkit || moz || nn6 || ie7 || ie6){ieBox = function(){return false;}}
var moz = !opera && !webkit && /gecko/i.test(ua);
var nn6 = !opera && /netscape.*6\./i.test(ua);

// define the default values
webfxMenuDefaultWidth			= 200;

webfxMenuDefaultBorderLeft		= 1;
webfxMenuDefaultBorderRight		= 1;
webfxMenuDefaultBorderTop		= 1;
webfxMenuDefaultBorderBottom	= 1;
webfxMenuDefaultPaddingLeft		= 0;
webfxMenuDefaultPaddingRight	     = 0;
webfxMenuDefaultPaddingTop		= 0;
webfxMenuDefaultPaddingBottom	= 0;

webfxMenuDefaultShadowLeft		= 0;
webfxMenuDefaultShadowRight		= 0;
webfxMenuDefaultShadowTop		= 0;
webfxMenuDefaultShadowBottom	= 0;

webfxMenuItemDefaultHeight		= 23;
webfxMenuItemDefaultText		= "Untitled";
webfxMenuItemDefaultHref		= "javascript:void(0)";

webfxMenuSeparatorDefaultHeight	= 2;

webfxMenuDefaultEmptyText		= "Empty";

webfxMenuDefaultUseAutoPosition	= nn6 ? false : true;

// other global constants
webfxMenuImagePath				= "";

webfxMenuUseHover				= opera || webkit ? true : false;
webfxMenuHideTime				= 200;
webfxMenuShowTime				= 200;

var webFXMenuHandler = {
	idCounter		:	0,
	idPrefix		:	"webfx-menu-object-",
	all				:	{},
	getId			:	function () { return this.idPrefix + this.idCounter++; },
	overMenuItem	:	function (oItem) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);
		var jsItem = this.all[oItem.id];
		if (webfxMenuShowTime <= 0)
			this._over(jsItem);
		else
			//this.showTimeout = window.setTimeout(function () { webFXMenuHandler._over(jsItem) ; }, webfxMenuShowTime);
			// I hate IE5.0 because the piece of **** crashes when using setTimeout with a function object
			this.showTimeout = window.setTimeout("webFXMenuHandler._over(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuShowTime);
	},
	outMenuItem	:	function (oItem) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);
		var jsItem = this.all[oItem.id];
		if (webfxMenuHideTime <= 0)
			this._out(jsItem);
		else
			//this.hideTimeout = window.setTimeout(function () { webFXMenuHandler._out(jsItem) ; }, webfxMenuHideTime);
			this.hideTimeout = window.setTimeout("webFXMenuHandler._out(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuHideTime);
	},
	blurMenu		:	function (oMenuItem) {
		window.setTimeout("webFXMenuHandler.all[\"" + oMenuItem.id + "\"].subMenu.hide();", webfxMenuHideTime);
	},
	_over	:	function (jsItem) {
		if (jsItem.subMenu) {
			jsItem.parentMenu.hideAllSubs();
			jsItem.subMenu.show();
		}
		else
			jsItem.parentMenu.hideAllSubs();
	},
	_out	:	function (jsItem) {
		// find top most menu
		var root = jsItem;
		var m;
		if (root instanceof WebFXMenuButton)
			m = root.subMenu;
		else {
			m = jsItem.parentMenu;
			while (m.parentMenu != null && !(m.parentMenu instanceof WebFXMenuBar))
				m = m.parentMenu;
		}
		if (m != null)
			m.hide();
	},
	hideMenu	:	function (menu) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);

		this.hideTimeout = window.setTimeout("webFXMenuHandler.all['" + menu.id + "'].hide()", webfxMenuHideTime);
	},
	showMenu	:	function (menu, src, dir) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);
		if (arguments.length < 3)
			dir = "vertical";

		menu.show(src, dir);
	}
};

function WebFXMenu() {
	this._menuItems	= [];
	this._subMenus	= [];
	this.id			= webFXMenuHandler.getId();
	this.top		= 0;
	this.left		= 0;
	this.shown		= false;
	this.parentMenu	= null;
	webFXMenuHandler.all[this.id] = this;
}

WebFXMenu.prototype.width			= webfxMenuDefaultWidth;
WebFXMenu.prototype.emptyText		= webfxMenuDefaultEmptyText;
WebFXMenu.prototype.useAutoPosition	= webfxMenuDefaultUseAutoPosition;

WebFXMenu.prototype.borderLeft		= webfxMenuDefaultBorderLeft;
WebFXMenu.prototype.borderRight		= webfxMenuDefaultBorderRight;
WebFXMenu.prototype.borderTop		= webfxMenuDefaultBorderTop;
WebFXMenu.prototype.borderBottom	= webfxMenuDefaultBorderBottom;

WebFXMenu.prototype.paddingLeft		= webfxMenuDefaultPaddingLeft;
WebFXMenu.prototype.paddingRight	= webfxMenuDefaultPaddingRight;
WebFXMenu.prototype.paddingTop		= webfxMenuDefaultPaddingTop;
WebFXMenu.prototype.paddingBottom	= webfxMenuDefaultPaddingBottom;

WebFXMenu.prototype.shadowLeft		= webfxMenuDefaultShadowLeft;
WebFXMenu.prototype.shadowRight		= webfxMenuDefaultShadowRight;
WebFXMenu.prototype.shadowTop		= webfxMenuDefaultShadowTop;
WebFXMenu.prototype.shadowBottom	= webfxMenuDefaultShadowBottom;

WebFXMenu.prototype.add = function (menuItem) {
	this._menuItems[this._menuItems.length] = menuItem;
	if (menuItem.subMenu) {
		this._subMenus[this._subMenus.length] = menuItem.subMenu;
		menuItem.subMenu.parentMenu = this;
	}

	menuItem.parentMenu = this;
};

WebFXMenu.prototype.show = function (relObj, sDir) {
	if (this.useAutoPosition)
		this.position(relObj, sDir);

	var divElement = document.getElementById(this.id);
	divElement.style.left = opera ? this.left : this.left + "px";
	divElement.style.top = opera ? this.top : this.top + "px";
	divElement.style.visibility = "visible";
	this.shown = true;
	if (this.parentMenu)
		this.parentMenu.show();
};

WebFXMenu.prototype.hide = function () {
	this.hideAllSubs();
	var divElement = document.getElementById(this.id);
	divElement.style.visibility = "hidden";
	this.shown = false;
};

WebFXMenu.prototype.hideAllSubs = function () {
	for (var i = 0; i < this._subMenus.length; i++) {
		if (this._subMenus[i].shown)
			this._subMenus[i].hide();
	}
};
WebFXMenu.prototype.toString = function () {
	var top = this.top + this.borderTop + this.paddingTop;
	var str = "<div id='" + this.id + "' class='webfx-menu' style='" +
	"width:" + (!ieBox  ?                                          /*Remember this is content-width */
		this.width - this.borderLeft - this.paddingLeft - this.borderRight - this.paddingRight  :
		this.width) + "px;" +
	(this.useAutoPosition ?
		"left:" + this.left + "px;" + "top:" + this.top + "px;" :
		"") +
	(ie50 ? "filter: none;" : "") +
	"'>";

	if (this._menuItems.length == 0) {
		str +=	"<span class='webfx-menu-empty'>" + this.emptyText + "</span>";
	}
	else {
		// loop through all menuItems
		for (var i = 0; i < this._menuItems.length; i++) {
			var mi = this._menuItems[i];
			str += mi;
			if (!this.useAutoPosition) {
				if (mi.subMenu && !mi.subMenu.useAutoPosition)
					mi.subMenu.top = top - mi.subMenu.borderTop - mi.subMenu.paddingTop;
				top += mi.height;
			}
		}

	}

	str += "</div>";

	for (var i = 0; i < this._subMenus.length; i++) {
		this._subMenus[i].left = this.left + this.width - this._subMenus[i].borderLeft;
		str += this._subMenus[i];
	}

	return str;
};
// WebFXMenu.prototype.position defined later
function WebFXMenuItem(sText, sHref, sToolTip, oSubMenu) {
	this.text = sText || webfxMenuItemDefaultText;
	this.href = (sHref == null || sHref == "") ? webfxMenuItemDefaultHref : sHref;
	this.subMenu = oSubMenu;
	if (oSubMenu)
		oSubMenu.parentMenuItem = this;
	this.toolTip = sToolTip;
	this.id = webFXMenuHandler.getId();
	webFXMenuHandler.all[this.id] = this;
};
WebFXMenuItem.prototype.height = webfxMenuItemDefaultHeight;
WebFXMenuItem.prototype.toString = function () {
	return	"<a" +
			" id='" + this.id + "'" +
			" href=\"" + this.href + "\"" +
			(this.target ? " target=\"" + this.target + "\"" : "") +
			(this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
			(webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
			(this.subMenu ? " unselectable='on' tabindex='-1'" : "") +
			">" +
			(this.subMenu ? "<img class='arrow' src=\"" + webfxMenuImagePath + "arrow.right.png\">" : "") +
			this.text +
			"</a>";
};


function WebFXMenuSeparator() {
	this.id = webFXMenuHandler.getId();
	webFXMenuHandler.all[this.id] = this;
};
WebFXMenuSeparator.prototype.height = webfxMenuSeparatorDefaultHeight;
WebFXMenuSeparator.prototype.toString = function () {
	return	"<div" +
			" id='" + this.id + "'" +
			(webfxMenuUseHover ?
			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
			" onmouseout='webFXMenuHandler.outMenuItem(this)'"
			:
			"") +
			"></div>"
};

function WebFXMenuBar() {
	this._parentConstructor = WebFXMenu;
	this._parentConstructor();
}
WebFXMenuBar.prototype = new WebFXMenu;
WebFXMenuBar.prototype.toString = function () {
	var str = "<div id='" + this.id + "' class='webfx-menu-bar'>";

	// loop through all menuButtons
	for (var i = 0; i < this._menuItems.length; i++)
		str += this._menuItems[i];

	str += "</div>";

	for (var i = 0; i < this._subMenus.length; i++)
		str += this._subMenus[i];

	return str;
};

function WebFXMenuButton(sText, sHref, sToolTip, oSubMenu) {
	this._parentConstructor = WebFXMenuItem;
	this._parentConstructor(sText, sHref, sToolTip, oSubMenu);
}
WebFXMenuButton.prototype = new WebFXMenuItem;
WebFXMenuButton.prototype.toString = function () {
	return	"<a" +
			" id='" + this.id + "'" +
			" href=\"" + this.href + "\"" +
			(this.target ? " target=\"" + this.target + "\"" : "") +
			(this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
			(webfxMenuUseHover ?
				(" onmouseover='webFXMenuHandler.overMenuItem(this)'" + " onmouseout='webFXMenuHandler.outMenuItem(this)'") :
				(" onfocus='webFXMenuHandler.overMenuItem(this)'" +(this.subMenu ?	" onblur='webFXMenuHandler.blurMenu(this)'" :""))
			) +	">" + this.text +
			(this.subMenu ? " <img class='arrow' src=\"" + webfxMenuImagePath + "arrow.down.png\" align='absmiddle'>" : "") +
			"</a>";
};


/* Position functions */

function getInnerLeft(el) {
	if (el == null) return 0;
	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
	return getLeft(el) + getBorderLeft(el);
}

function getLeft(el) {
	if (el == null) return 0;
	return el.offsetLeft + getInnerLeft(el.offsetParent);
}

function getInnerTop(el) {
	if (el == null) return 0;
	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
	return getTop(el) + getBorderTop(el);
}

function getTop(el) {
	if (el == null) return 0;
	return el.offsetTop + getInnerTop(el.offsetParent);
}

function getBorderLeft(el) {
	return ie ?
		el.clientLeft :
		parseInt(window.getComputedStyle(el, null).getPropertyValue("border-left-width"));
}

function getBorderTop(el) {
	return ie ?
		el.clientTop :
		parseInt(window.getComputedStyle(el, null).getPropertyValue("border-top-width"));
}

function opera_getLeft(el) {
	if (el == null) return 0;
	return el.offsetLeft + opera_getLeft(el.offsetParent);
}

function opera_getTop(el) {
	if (el == null) return 0;
	return el.offsetTop + opera_getTop(el.offsetParent);
}

function getOuterRect(el) {
	return {
		left:	(opera ? opera_getLeft(el) : getLeft(el)),
		top:	(opera ? opera_getTop(el) : getTop(el)),
		width:	el.offsetWidth,
		height:	el.offsetHeight
	};
}

// mozilla bug! scrollbars not included in innerWidth/height
function getDocumentRect(el) {
	return {
		left:	0,
		top:	0,
		width:	(ie ?
					(ieBox ? document.body.clientWidth : document.documentElement.clientWidth) :
					window.innerWidth
				),
		height:	(ie ?
					(ieBox ? document.body.clientHeight : document.documentElement.clientHeight) :
					window.innerHeight
				)
	};
}

function getScrollPos(el) {
	return {
		left:	(ie ?
					(ieBox ? document.body.scrollLeft : document.documentElement.scrollLeft) :
					window.pageXOffset
				),
		top:	(ie ?
					(ieBox ? document.body.scrollTop : document.documentElement.scrollTop) :
					window.pageYOffset
				)
	};
}

/* end position functions */

WebFXMenu.prototype.position = function (relEl, sDir) {
	var dir = sDir;
	// find parent item rectangle, piRect
	var piRect;
	if (!relEl) {
		var pi = this.parentMenuItem;
		if (!this.parentMenuItem)
			return;

		relEl = document.getElementById(pi.id);
		if (dir == null)
			dir = pi instanceof WebFXMenuButton ? "vertical" : "horizontal";

		piRect = getOuterRect(relEl);
	}
	else if (relEl.left != null && relEl.top != null && relEl.width != null && relEl.height != null) {	// got a rect
		piRect = relEl;
	}
	else
		piRect = getOuterRect(relEl);

	var menuEl = document.getElementById(this.id);
	var menuRect = getOuterRect(menuEl);
	var docRect = getDocumentRect();
	var scrollPos = getScrollPos();
	var pMenu = this.parentMenu;

	if (dir == "vertical") {
		if (piRect.left + menuRect.width - scrollPos.left <= docRect.width)
			this.left = piRect.left;
		else if (docRect.width >= menuRect.width)
			this.left = docRect.width + scrollPos.left - menuRect.width;
		else
			this.left = scrollPos.left;

		if (piRect.top + piRect.height + menuRect.height <= docRect.height + scrollPos.top)
			this.top = piRect.top + piRect.height;
		else if (piRect.top - menuRect.height >= scrollPos.top)
			this.top = piRect.top - menuRect.height;
		else if (docRect.height >= menuRect.height)
			this.top = docRect.height + scrollPos.top - menuRect.height;
		else
			this.top = scrollPos.top;
	}
	else {
		if (piRect.top + menuRect.height - this.borderTop - this.paddingTop <= docRect.height + scrollPos.top)
			this.top = piRect.top - this.borderTop - this.paddingTop;
		else if (piRect.top + piRect.height - menuRect.height + this.borderTop + this.paddingTop >= 0)
			this.top = piRect.top + piRect.height - menuRect.height + this.borderBottom + this.paddingBottom + this.shadowBottom;
		else if (docRect.height >= menuRect.height)
			this.top = docRect.height + scrollPos.top - menuRect.height;
		else
			this.top = scrollPos.top;

		var pMenuPaddingLeft = pMenu ? pMenu.paddingLeft : 0;
		var pMenuBorderLeft = pMenu ? pMenu.borderLeft : 0;
		var pMenuPaddingRight = pMenu ? pMenu.paddingRight : 0;
		var pMenuBorderRight = pMenu ? pMenu.borderRight : 0;

		if (piRect.left + piRect.width + menuRect.width + pMenuPaddingRight +
			pMenuBorderRight - this.borderLeft + this.shadowRight <= docRect.width + scrollPos.left)
			this.left = piRect.left + piRect.width + pMenuPaddingRight + pMenuBorderRight - this.borderLeft;
		else if (piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight >= 0)
			this.left = piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight;
		else if (docRect.width >= menuRect.width)
			this.left = docRect.width  + scrollPos.left - menuRect.width;
		else
			this.left = scrollPos.left;
	}
};

//---------------------------------------------------------------------------------------------------
/* Do not edit anything above this line */
webfxMenuImagePath	= "images/";

var myMenu = new WebFXMenu;
for (var i = 0; i < 5; i++) {
	myMenu.add(new WebFXMenuItem("Menu Item " + i, "javascript:alert('Not doing anything here')", "Tool tip to show"));
}

myMenu.add(new WebFXMenuSeparator());

var tmp;
for (var i = 5; i < 10; i++) {
	tmp = new WebFXMenu;
	for (var j = 0; j < 5; j++) {
		tmp.add(new WebFXMenuItem("Menu Item " + i + "." + j, "javascript:alert('Not doing anything here')", "Tool tip to show"));
	}
	myMenu.add(new WebFXMenuItem("Menu Item " + i, "javascript:alert('Not doing anything here')", "Tool tip to show", tmp));
}

var myMenu2 = new WebFXMenu;
myMenu2.add(new WebFXMenuItem("Menu Item 0"));
myMenu2.add(new WebFXMenuItem("Menu Item 1"));
myMenu2.add(new WebFXMenuItem("New Window", "javascript:void window.open(\"http://webfx.eae.net\", \"windowOrFrameName\")"));


var myBar = new WebFXMenuBar;
myBar.add(new WebFXMenuButton("Menu Button 1", "javascript:alert('Not doing anything here')", "Tool tip to show"));
myBar.add(new WebFXMenuButton("Menu Button 2", null, "Tool tip to show", myMenu));
myBar.add(new WebFXMenuButton("Menu Button 3", null, null, myMenu2));

</script>
</head>
<body>

<script>
document.write(myBar);
</script>
<div class="menuBottom"></div>


</body>
</html>

Mats Palmgren (inactive)

Comment 1

•

16 years ago

Please use the "Add an attachment" to upload the testcase instead.
Line breaking in Bugzilla introduced errors in the code above.

jag (Peter Annema)

Comment 2

•

16 years ago

I don't quite understand what you think we're doing wrong. We draw the background colour and image underneath the borders. Per the spec you referred to the image's origin is relative to the padding box, and in CSS3 there's a proposal to let authors change that behaviour through the background-origin property (which defaults to padding), for which Mozilla provides a test-bed through the -moz-background-origin property.

Perhaps you could create a simple test case that shows the problem, or point us to a site where we can see it?

henryfhchan

Reporter

Comment 3

•

16 years ago

Under WWW Consortium:

14.2 The background
Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model, "background" refers to the background of the content, padding and [[[[[[[[[[border]]]]]]]]]]] areas. Border colors and styles are set with the border properties. Margins are always transparent. 

I have included seven very very simple testcase, under different doctype (and one quirks)

Mats Palmgren (inactive)

Comment 4

•

16 years ago

Henry, your testcases that you pasted in comment 0 are unusable to us
because Bugzilla has introduced line breaks in it.  Please upload the
testcase files using this link:
https://bugzilla.mozilla.org/attachment.cgi?bugid=417928&action=enter

Alternatively, you can put the testcases on a public web server somewhere.

henryfhchan

Reporter

Comment 5

•

16 years ago

Attached file testcase with doctype 3.2 — Details

henryfhchan

Reporter

Comment 6

•

16 years ago

Attached file Doctype of HTML 4 Loose — Details

henryfhchan

Reporter

Comment 7

•

16 years ago

Attached file Doctype HTML 4 Strict — Details

henryfhchan

Reporter

Comment 8

•

16 years ago

Attached file Quirky attachment — Details

henryfhchan

Reporter

Comment 9

•

16 years ago

Attached file doctype xhtml 1.1 — Details

henryfhchan

Reporter

Comment 10

•

16 years ago

Attached file doctype of xhtml 1 strict — Details

henryfhchan

Reporter

Comment 11

•

16 years ago

Attached file doctype xhtml 1.0 transitional — Details

jag (Peter Annema)

Comment 12

•

16 years ago

Henry, I'm still unclear on what the problem is. Are you expecting the background image to shine through the black border? Are you expecting the image to use a different origin? Maybe you could attach an image with the expected rendering?

henryfhchan

Reporter

Comment 13

•

16 years ago

About IE......................
I can make it the expected way only in IE 6 by setting the border-color to transparent.  IE 6 then pushes it into the right place and shows the black border. (It should have shown a blank space)

Well talking back to firefox..............
It seems to be in nightly build of Firefox too.

henryfhchan

Reporter

Comment 14

•

16 years ago

Attached image expected rendering — Details

henryfhchan

Reporter

Comment 15

•

16 years ago

a bit of the background (to be exact, 40px X 40px from top left, 40px X 200px from top, 200X40px from left) should be covered by the 40px solid border according to w3C.  the remaining part should be repeated and under the right border.

In w3c, they say the background should be under the border, padding and content. ( in other words, if the border is 1px solid black, the top line and left line (of pixels) of the background should be covered by black.)

henryfhchan

Reporter

Comment 16

•

16 years ago

from mozilla developer docs:

-moz-background-origin: border | padding | content
The background position is relative to the border, so the image can go behind the border.

---------------------

from http://www.w3.org/TR/CSS21/colors.html#background (- first paragraph)

In terms of the box model, "background" refers to the background of the content, padding and border areas.

--------------------------
This means the default property of origin (with correct Doctype) SHOULD HAVE BEEN border and NOT padding as it is now.

henryfhchan

Reporter

Updated

•

16 years ago

Keywords: css2

jag (Peter Annema)

Comment 17

•

16 years ago

In section 14.2.1, the text describing background-position says the background image's origin is the padding box:

http://www.w3.org/TR/CSS21/colors.html#propdef-background-position

> 'background-position'
> ...
>     Initial: 0% 0% 
> ...
>
> <percentage>
>     A percentage X aligns the point X% across (for horizontal) or down
>     (for vertical) the image with the point X% across (for horizontal)
>     or down (for vertical) the element's padding box. For example, with
>     a value pair of '0% 0%',the upper left corner of the image is
>     aligned with the upper left corner of the padding box. A value pair
>     of '100% 100%' places the lower right corner of the image in the
>     lower right corner of the padding box. With a value pair of
>     '14% 84%', the point 14% across and 84% down the image is to be
>     placed at the point 14% across and 84% down the padding box.
>
> <length>
>     A length L aligns the top left corner of the image a distance L to
>     the right of (for horizontal) or below (for vertical) the top left
>     corner of the element's padding box. For example, with a value pair
>     of '2cm 1cm', the upper left corner of the image is placed 2cm to
>     the right and 1cm below the upper left corner of the padding box.

See also bug 1998 comment 0.

Per the above we're currently doing the right thing: for the default values of "background-origin: 0% 0%; background-repeat: repeat;" the background image starts drawing at the top left padding corner and repeats left and right, up and down underneath the borders (as you can see when you make the border-color transparent), just as I see in your first 7 attachments.

henryfhchan

Reporter

Comment 18

•

16 years ago

I know about that too. It seems that w3C is making some funny rules:
------------------------------------------------------------------------
14.2
Authors may specify the background of an element (i.e., its rendering surface) as either a color or an image. In terms of the box model, "background" refers to the background of the content, padding and border areas. Border colors and styles are set with the border properties. Margins are always transparent.

14.2.1
<percentage>
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
<length>
A length L aligns the top left corner of the image a distance L to the right of (for horizontal) or below (for vertical) the top left corner of the element's padding box. For example, with a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding box.
------------------------------------------------------------------------
I think we've found a hole in w3C standards. :o

-------------------------------------------------------------------------
I think that the -moz-background-origin should be border-box for default, but when background-position is specified, background-origin swaps to padding-box straight away (even in DOM) unless background-origin is set via CSS or DOM beforehand.
--------------------------------------------------------------------------
Hope they correct this or provide workaround in CSS3 >.<

jag (Peter Annema)

Comment 19

•

16 years ago

I don't think there's a hole at all. They basically say that background (color/image) should extend underneath the border box, but that in terms of the origin you use the padding box. So, the initial value of padding for background-origin in CSS3 makes sense.

Again, see bug 1998.

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Comment 20

•

16 years ago

The default of CSS3's background-origin is the padding-box; the default of CSS3's background-clip is border-box.  These are consistent with what CSS2.1 says.  For background-clip:

# In terms of the box model, "background" refers to the background of the
# content, padding and border areas.
--http://www.w3.org/TR/2007/CR-CSS21-20070719/colors.html#background

and for background-origin:

# Initial:  	0% 0%

# A percentage X aligns the point X% across (for horizontal) or down (for
# vertical) the image with the point X% across (for horizontal) or down (for
# vertical) the element's padding box.

--http://www.w3.org/TR/2007/CR-CSS21-20070719/colors.html#propdef-background-position


Most borders aren't transparent or partially transparent; for the few that are, the tiling is odd, yes.  But I think these are the best possible set of defaults, and the produce the right results in far more cases than making the tiling origin start under the border would.

I'm marking this bug INVALID based on the discussion because our behavior as described is correct.  I haven't looked the testcases; it's not clear which files I should look at or what I should see when looking at them.  (That's why we want clear steps to reproduce, expected results, and actual results when filing bugs.)

Component: General → Layout

Product: Firefox → Core

QA Contact: general → layout

David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)

Updated

•

16 years ago

Status: UNCONFIRMED → RESOLVED

Closed: 16 years ago

Resolution: --- → INVALID

testcase with doctype 3.2 16 years ago henryfhchan 227 bytes, text/html		Details
Doctype of HTML 4 Loose 16 years ago henryfhchan 278 bytes, text/html		Details
Doctype HTML 4 Strict 16 years ago henryfhchan 264 bytes, text/html		Details
Quirky attachment 16 years ago henryfhchan 162 bytes, text/html		Details
doctype xhtml 1.1 16 years ago henryfhchan 267 bytes, text/html		Details
doctype of xhtml 1 strict 16 years ago henryfhchan 278 bytes, text/html		Details
doctype xhtml 1.0 transitional 16 years ago henryfhchan 290 bytes, text/html		Details
expected rendering 16 years ago henryfhchan 5.64 KB, image/png		Details