search

tylerlong / google-code-prettify

Automatically exported from code.google.com/p/google-code-prettify
Apache License 2.0
0 stars 0 forks source link

<xmp class="prettyprint"> not styled by CSS #47

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. Edit prettify_test.html to add a new test (see [TEST_PATCH]):
a) add a function to display the classname(s) of element with id='htmlXmp'.
b) modify <body onload=""> to show htmXmp's classname(s) before and after
prettyPrint() is called.
2. Open prettify_test.html in IE6.

(Please include HTML, not just your source code)
What is the expected output?  What do you see instead?

[Expected Output]
The classname of 'htmlXmp' should be same before and after prettyPrint() is
called.
1st AlertBox: "before - prettyprint"
2nd AlertBox: "after - prettyprint"

[Actual Output]
The classname of 'htmlXmp' is not set after prettyPrint() is called.
1st AlertBox: "before - prettyprint"
2nd AlertBox: "after - "

What version are you using?  On what browser?
Prettify revision 39, on IE6.

Please provide any additional information below.

It happens that, in IE, 
  pre.setAttribute('class', ..);
does not work, but 
  pre.className = 'classnames'; 
works on IE, and other browsers as well (as discussed in [1]).

[1]
http://www.quirksmode.org/bugreports/archives/2005/03/setAttribute_does_not_work
_in_IE_when_used_with_th.html

So, here's a patch to resolve the issue:

--- prettify.js (revision 39)
+++ prettify.js (working copy)
@@ -1136,6 +1136,9 @@
                 var a = cs.attributes[i];
                 if (a.specified) {
                   pre.setAttribute(a.name, a.value);
+                  if (a.name.toLowerCase() === 'class') {
+                    pre.className = a.value;
+                  }
                 }
               }
               pre.innerHTML = newContent;

============
[TEST_PATCH]
--- ../tests/prettify_test.html (revision 39)
+++ ../tests/prettify_test.html (working copy)
@@ -8,6 +8,9 @@
 // get accurate timing
 PR_SHOULD_USE_CONTINUATION = false;
 function pr_isIE6() { return false; }  // Ensure consistent output.
+function showClass(prefix) {
+  alert(prefix+' - '+document.getElementById('htmlXmp').className);
+}
 </script>
 <link rel="stylesheet" type="text/css" href="../src/prettify.css" />
 <style type="text/css">
@@ -16,7 +19,7 @@
 </head>

 <body
- onload="startClock(); prettyPrint(function () { stopClock(); runTests(); })"
+ onload="showClass('before'); startClock(); prettyPrint(function () {
stopClock(); runTests(); }); showClass('after')"
  bgcolor="white">
 <div id="timing"></div>
 <div id="errorReport" style="white-space: pre"></div>

Original issue reported on code.google.com by teohuiming on 6 Jul 2008 at 2:34

GoogleCodeExporter commented 9 years ago

Original comment by mikesamuel@gmail.com on 7 Jul 2008 at 5:48

GoogleCodeExporter commented 9 years ago

Original comment by mikesamuel@gmail.com on 13 Jul 2008 at 10:54