dynamically generated CSS class rules not applied to class member elements

VERIFIED WORKSFORME

Status

Camino Graveyard
Page Layout
VERIFIED WORKSFORME
10 years ago
10 years ago

People

(Reporter: bugzilla.mozilla.org, Unassigned)

Tracking

Details

Attachments

(1 attachment)

(Reporter)

Description

10 years ago
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>
(Reporter)

Comment 1

10 years ago
Created attachment 359235 [details]
HTML/JavaScript/CSS complete file reproduces problem.

File contains full description.

Comment 2

10 years ago
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

Comment 3

10 years ago
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.

Updated

10 years ago
Status: UNCONFIRMED → RESOLVED
Last Resolved: 10 years ago
Resolution: --- → WORKSFORME

Updated

10 years ago
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.