Closed Bug 475677 Opened 16 years ago Closed 16 years ago

dynamically generated CSS class rules not applied to class member elements

Categories

(Camino Graveyard :: Page Layout, defect)

Product:
Camino Graveyard
Component:
Page Layout
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
VERIFIED WORKSFORME

People

(Reporter: bugzilla.mozilla.org, Unassigned)

Details

Attachments

(1 file)

HTML/JavaScript/CSS complete file reproduces problem.
5.08 KB, text/html
Details 
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.19) Gecko/20081212 Camino/1.6.6 (like Firefox/2.0.0.19)
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en; rv:1.8.1.19) Gecko/20081212 Camino/1.6.6 (like Firefox/2.0.0.19)

Dynamically (javascript/DHTML) inserted CSS rules are not being properly applied to HTML elements defined as members of the selector classes inserted.

Interestingly, renders correctly in latest Safari and FireFox but not Camino.

The entire code of the file that reproduces the problem is included in the Additional Information field below.  Attachment will be created after submission of bug.

Reproducible: Always

Steps to Reproduce:
1. Enter numbers 1 through 3 in any row or column of a 3x3 grid
2. Click outside of the last used text field.
3.
Actual Results:  
Nothing happens.

Expected Results:  
table cells identified outside the grid borders in the same row or column as the numbers entered should have their background color changed to green.

code of page showing specific problem:

<html>
	<head>
		<style>
			#main				{	text-align:			center;			}
			.index				{	font-weight:		bold;		
									background:			#ddd;		
									text-align:			center;			}
			input.data			{	border:				0px;		
									font-size:			24px;		
									height:				40px;		
									width:				40px;		
									text-align:			center;		
									background:			#ddd;		
									padding-top:		2px;			}
			td.user				{	border-right:		2px dotted #aaa;
									vertical-align:		top;		
									border-bottom:		2px dotted #aaa;}
			td.btop				{	border-top:			2px solid #000;	}
			td.blef				{	border-left:		2px solid #000;	}
			.brit, td.brit		{	border-right:		2px solid #000;	}
			.bbot, td.bbot		{	border-bottom:		2px solid #000;	}
		</style>
		<script>
			var gridHeight;
			var	rlabels = '_ABCDEFGHIJKLM';
			var	clabels = '_abcdefghijklm';
			var checkProg = new Progress( 'A', 'B','C','D','E','F','G','H','I','J','K','L','M','a','b','c','d','e','f','g','h','i','j','k','l','m' );
			function Progress() {
				for ( i=0; i<Progress.arguments.length; i++ ) this[i] = Progress.arguments[i];
			}
			function MakeString( character, length) {
				out = '';
				for ( i=0; i<length; i++ ) out += character.toString();
				return out;
			}			
			function checkProgress ( label ) {
				row = label.charAt(0); col = label.charAt(1);
				colvalues = '.' + rlabels.substring(0,gridHeight); 
				rowvalues = '.' + clabels.substring(0,gridHeight);
				for ( dimension=1; dimension<=gridHeight; dimension++ ) {
					coltarget = document.getElementById('data'+row+clabels.charAt(dimension)).value;
					rowtarget = document.getElementById('data'+rlabels.charAt(dimension)+col).value;
					rowCutVal = eval('/' + rowvalues.charAt(coltarget) + '/');
					rowvalues = rowvalues.replace(rowCutVal,'.');
					colCutVal = eval('/' + colvalues.charAt(rowtarget) + '/');
					colvalues = colvalues.replace(colCutVal,'.');
				}
				checkProg[row] = ( rowvalues == '.'+ MakeString('.', gridHeight) ? 1 : 0 );
				checkProg[col] = ( colvalues == '.'+ MakeString('.', gridHeight) ? 1 : 0 );
				rowcolor = ( checkProg[row] ? '#0c0' : '#ddd' );
				colcolor = ( checkProg[col] ? '#0c0' : '#ddd' );
				toggleCSS( '.'+row+'rix', 'style.background', rowcolor);
				toggleCSS( '.'+col+'cix', 'style.background', colcolor);
			}
			function toggleCSS( togSelector, togAttribute, togValue) {
				mysheet = document.styleSheets[0];
				myrules = ( mysheet.cssRules? mysheet.cssRules: mysheet.rules );
				for (j=0; j<myrules.length; j++) {
					if ( myrules[j].selectorText.toLowerCase() == togSelector.toLowerCase() ) {
					 targetrule = myrules[j]; break;
				}	}
				eval('targetrule.'+togAttribute+' = togValue');
			}
			function MakeCell( bdrClass, label ) {
				output = ' class="'+ bdrClass + '" id="cell' + label + '">\n';
				output += '<input class=data id="data' + label + '" type=text ';
				output += 'onblur=\'checkProgress("' + label + '")\'>';
				output += '</td>';
				return output;
			}
			function MakeGrid( gWidth ) {
				gHeight = gWidth;
				dispCols = gWidth*1+1;
				dispRows = gHeight*1+1;
				output = '';
				output += '<table cellspacing=0 cellpadding=2>';
				for ( gRow=0 ; gRow<=dispRows ; gRow++ ) {
					output += '\n<tr>';
					for ( gCol=0 ; gCol<=dispCols ; gCol++ ) {
						output += '<td';
						if ( gRow == 0 || gRow == dispRows ) {
							if ( gCol != 0 && gCol != dispCols ) 
								output += ' class="'+clabels.charAt(gCol)+'cix index">'+clabels.charAt(gCol)+'</td>';
							else output += '></td>';
						} else {
							if ( gCol == 0 || gCol == dispCols ) 
								output += ' class="'+rlabels.charAt(gRow)+'rix index">&nbsp; '+rlabels.charAt(gRow)+' &nbsp;</td>';
							else {
								label = rlabels.charAt( gRow ) + clabels.charAt( gCol );
								bdrClass = "user ";
								if ( gRow == 1 ) bdrClass += " btop";
								else if ( gRow == gHeight ) bdrClass += " bbot";
								if ( gCol == 1 ) bdrClass += " blef";
								else if ( gCol == gWidth ) bdrClass += " brit";
								output += MakeCell( bdrClass, label );
					}	}	}
					output += '</tr>\n';
				}
				output += '</table><br>&nbsp;<br>';
				document.getElementById('grid').innerHTML += output;
				gridHeight = gHeight;
				stylesheetOut = '';
				for ( x=1;x<=gridHeight;x++ ) {
					stylesheetOut += '.'+rlabels.charAt(x)+'rix { color: #eee; background: #ddd; }\n';
					stylesheetOut += '.'+clabels.charAt(x)+'cix { color: #eee; background: #ddd; }\n';
				}
				document.getElementsByTagName('style')[0].firstChild.nodeValue += stylesheetOut;
			}
		</script>
	</head>
	<body onLoad=MakeGrid('3')>
		<div id=main>
			<center>
				<h2>Possible Camino CSS bug:</h2>
				<div id=grid>
				</div>
				<h3>The script on this page is meant to change the background color of the</h3>
				<h3>index cells (the letters outside the grid) when a row and/or column contains</h3>
				<h3>all the digits from 1 through the dimension of the grid (in this case 3).</h3>
				<h3>The update is activated on the onblur event from the input fields.</h3>
				<br>
				<h3>The script works as expected in FireFox 3.0.5 and Safari 3.2.1 on </h3>
				<h3>Apple Mac OS X 10.5.6, but not in Camino 1.6.6.</h3>
			</center>
		</div>
	</body>
</html>
File contains full description.
Firefox 3 and Camino 1.6 are not equivalent browsers; please test Camino 1.6 against Firefox 2, or test Firefox 3 against Camino 2.0b1 (or a newer nightly) for a valid comparison. Note that testing a 2.0b1 build will irrevocably change some of your profile data, so you'll want to back up your profile first if you intend to go back to 1.6 after that.

Since the CSS code is all Gecko, it's exceedingly unlikely this bug actually exists in Camino 2 if it doesn't exist in Firefox 3. It's equally unlikely that Firefox 2 is free of this bug. Unless we know the dupe, this is probably a WORKSFORME with trunk.

cl
Fails in Firefox 2.0.0.19 (same as Camino 1.6.6). Works in Camino 2.0 latest nightly. I'd say: WorksForMe, unless someone knows which bug to dupe to.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → WORKSFORME
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: