Skip to content
Browse files

Prevent infinite loop when applied to table elements; for some reason…

… IE fires onpropertychange events for legacy element.background and element.bgColor properties when those properties aren't actually being changed but the element's runtimeStyle is, which results in an infinite loop. Therefore we just filter out events for those property names.
  • Loading branch information...
1 parent 8f0b72b commit d59e2ca3fb476bb4e4f28a04bb2618b953cf6e1b Jason Johnston committed Sep 3, 2010
Showing with 103 additions and 15 deletions.
  1. +21 −15 sources/Element.js
  2. +82 −0 tests/tables.html
View
36 sources/Element.js
@@ -1,7 +1,8 @@
PIE.Element = (function() {
- var wrappers = {};
+ var wrappers = {},
+ ignorePropertyNames = { 'background':1, 'bgColor':1 };
function Element( el ) {
var lastW, lastH, lastX, lastY,
@@ -127,25 +128,30 @@ PIE.Element = (function() {
* Handle property changes to trigger update when appropriate.
*/
function propChanged() {
- if( initialized ) {
- var i, len,
- toUpdate = [];
+ // Some elements like <table> fire onpropertychange events for old-school background properties
+ // ('background', 'bgColor') when runtimeStyle background properties are changed, which
+ // results in an infinite loop; therefore we filter out those property names.
+ if( !( event && event.propertyName in ignorePropertyNames ) ) {
+ if( initialized ) {
+ var i, len,
+ toUpdate = [];
- boundsInfo.lock();
+ boundsInfo.lock();
- for( i = 0, len = renderers.length; i < len; i++ ) {
- if( renderers[i].needsUpdate() ) {
- toUpdate.push( renderers[i] );
+ for( i = 0, len = renderers.length; i < len; i++ ) {
+ if( renderers[i].needsUpdate() ) {
+ toUpdate.push( renderers[i] );
+ }
+ }
+ for( i = 0, len = toUpdate.length; i < len; i++ ) {
+ toUpdate[i].updateProps();
}
+
+ boundsInfo.unlock();
}
- for( i = 0, len = toUpdate.length; i < len; i++ ) {
- toUpdate[i].updateProps();
+ else if( !initializing ) {
+ init();
}
-
- boundsInfo.unlock();
- }
- else if( !initializing ) {
- init();
}
}
View
82 tests/tables.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <title>Tests for background gradients</title>
+
+ <style type="text/css">
+
+ table {
+ border: 1px solid blue;
+ background: #EEF;
+ margin: 30px;
+ -webkit-border-radius: 30px;
+ -moz-border-radius: 30px;
+ border-radius: 30px;
+
+ behavior: url(../build/PIE_uncompressed.htc);
+ }
+
+ th {
+ border: 1px solid red;
+ /*background: #FEE;*/
+ padding: .5em 2em;
+ }
+
+ td {
+ border: 1px solid green;
+ /*background: #EFE;*/
+ padding: .5em 2em;
+ }
+
+
+
+ #test1 {
+ border-collapse: separate;
+ border-spacing: 5px;
+ }
+
+ #test2 {
+ border-collapse: collapse;
+ }
+
+ .rounded {
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ }
+
+ </style>
+</head>
+<body>
+
+ <table id="test1">
+ <thead>
+ <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr>
+ </thead>
+ <tfoot>
+ <tr> <th>Foot 1</th> <th>Foot 2</th> <th class="rounded">Foot 3</th> </tr>
+ </tfoot>
+ <tbody>
+ <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ <tr> <td class="rounded">Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ </tbody>
+ </table>
+
+ <table id="test2">
+ <thead>
+ <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr>
+ </thead>
+ <tfoot>
+ <tr> <th>Foot 1</th> <th>Foot 2</th> <th class="rounded">Foot 3</th> </tr>
+ </tfoot>
+ <tbody>
+ <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ <tr> <td class="rounded">Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
+ </tbody>
+ </table>
+
+</body>
+</html>

0 comments on commit d59e2ca

Please sign in to comment.
Something went wrong with that request. Please try again.