CSS: Background does not extend under border

RESOLVED INVALID

Status

()

RESOLVED INVALID
11 years ago
11 years ago

People

(Reporter: henry.fai.hang.chan, Unassigned)

Tracking

({css2})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(8 attachments)

(Reporter)

Description

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

Comment 1

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

Comment 2

11 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?
(Reporter)

Comment 3

11 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)

Comment 4

11 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.
(Reporter)

Comment 5

11 years ago
Created attachment 305003 [details]
testcase with doctype 3.2
(Reporter)

Comment 6

11 years ago
Created attachment 305004 [details]
Doctype of HTML 4 Loose
(Reporter)

Comment 7

11 years ago
Created attachment 305005 [details]
Doctype HTML 4 Strict
(Reporter)

Comment 8

11 years ago
Created attachment 305006 [details]
Quirky attachment
(Reporter)

Comment 9

11 years ago
Created attachment 305007 [details]
doctype xhtml 1.1
(Reporter)

Comment 10

11 years ago
Created attachment 305008 [details]
doctype of xhtml 1 strict
(Reporter)

Comment 11

11 years ago
Created attachment 305009 [details]
doctype xhtml 1.0 transitional

Comment 12

11 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?
(Reporter)

Comment 13

11 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.
(Reporter)

Comment 14

11 years ago
Created attachment 305294 [details]
expected rendering
(Reporter)

Comment 15

11 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.)
(Reporter)

Comment 16

11 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.
(Reporter)

Updated

11 years ago
Keywords: css2

Comment 17

11 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.
(Reporter)

Comment 18

11 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 >.<

Comment 19

11 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.
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
Status: UNCONFIRMED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.