Skip to content
This repository
Browse code

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.
commit d59e2ca3fb476bb4e4f28a04bb2618b953cf6e1b 1 parent 8f0b72b
authored September 03, 2010
36  sources/Element.js
... ...
@@ -1,7 +1,8 @@
1 1
 
2 2
 PIE.Element = (function() {
3 3
 
4  
-    var wrappers = {};
  4
+    var wrappers = {},
  5
+        ignorePropertyNames = { 'background':1, 'bgColor':1 };
5 6
 
6 7
     function Element( el ) {
7 8
         var lastW, lastH, lastX, lastY,
@@ -127,25 +128,30 @@ PIE.Element = (function() {
127 128
          * Handle property changes to trigger update when appropriate.
128 129
          */
129 130
         function propChanged() {
130  
-            if( initialized ) {
131  
-                var i, len,
132  
-                    toUpdate = [];
  131
+            // Some elements like <table> fire onpropertychange events for old-school background properties
  132
+            // ('background', 'bgColor') when runtimeStyle background properties are changed, which
  133
+            // results in an infinite loop; therefore we filter out those property names.
  134
+            if( !( event && event.propertyName in ignorePropertyNames ) ) {
  135
+                if( initialized ) {
  136
+                    var i, len,
  137
+                        toUpdate = [];
133 138
 
134  
-                boundsInfo.lock();
  139
+                    boundsInfo.lock();
135 140
 
136  
-                for( i = 0, len = renderers.length; i < len; i++ ) {
137  
-                    if( renderers[i].needsUpdate() ) {
138  
-                        toUpdate.push( renderers[i] );
  141
+                    for( i = 0, len = renderers.length; i < len; i++ ) {
  142
+                        if( renderers[i].needsUpdate() ) {
  143
+                            toUpdate.push( renderers[i] );
  144
+                        }
  145
+                    }
  146
+                    for( i = 0, len = toUpdate.length; i < len; i++ ) {
  147
+                        toUpdate[i].updateProps();
139 148
                     }
  149
+
  150
+                    boundsInfo.unlock();
140 151
                 }
141  
-                for( i = 0, len = toUpdate.length; i < len; i++ ) {
142  
-                    toUpdate[i].updateProps();
  152
+                else if( !initializing ) {
  153
+                    init();
143 154
                 }
144  
-
145  
-                boundsInfo.unlock();
146  
-            }
147  
-            else if( !initializing ) {
148  
-                init();
149 155
             }
150 156
         }
151 157
 
82  tests/tables.html
... ...
@@ -0,0 +1,82 @@
  1
+<!DOCTYPE html>
  2
+
  3
+<html>
  4
+<head>
  5
+    <title>Tests for background gradients</title>
  6
+
  7
+    <style type="text/css">
  8
+
  9
+        table {
  10
+            border: 1px solid blue;
  11
+            background: #EEF;
  12
+            margin: 30px;
  13
+            -webkit-border-radius: 30px;
  14
+            -moz-border-radius: 30px;
  15
+            border-radius: 30px;
  16
+
  17
+            behavior: url(../build/PIE_uncompressed.htc);
  18
+        }
  19
+
  20
+        th {
  21
+            border: 1px solid red;
  22
+            /*background: #FEE;*/
  23
+            padding: .5em 2em;
  24
+        }
  25
+
  26
+        td {
  27
+            border: 1px solid green;
  28
+            /*background: #EFE;*/
  29
+            padding: .5em 2em;
  30
+        }
  31
+
  32
+
  33
+
  34
+        #test1 {
  35
+            border-collapse: separate;
  36
+            border-spacing: 5px;
  37
+        }
  38
+
  39
+        #test2 {
  40
+            border-collapse: collapse;
  41
+        }
  42
+
  43
+        .rounded {
  44
+            -webkit-border-radius: 10px;
  45
+            -moz-border-radius: 10px;
  46
+            border-radius: 10px;
  47
+        }
  48
+
  49
+    </style>
  50
+</head>
  51
+<body>
  52
+
  53
+    <table id="test1">
  54
+        <thead>
  55
+            <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr>
  56
+        </thead>
  57
+        <tfoot>
  58
+            <tr> <th>Foot 1</th> <th>Foot 2</th> <th class="rounded">Foot 3</th> </tr>
  59
+        </tfoot>
  60
+        <tbody>
  61
+            <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  62
+            <tr> <td class="rounded">Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  63
+            <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  64
+        </tbody>
  65
+    </table>
  66
+
  67
+    <table id="test2">
  68
+        <thead>
  69
+            <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> </tr>
  70
+        </thead>
  71
+        <tfoot>
  72
+            <tr> <th>Foot 1</th> <th>Foot 2</th> <th class="rounded">Foot 3</th> </tr>
  73
+        </tfoot>
  74
+        <tbody>
  75
+            <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  76
+            <tr> <td class="rounded">Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  77
+            <tr> <td>Body 1</td> <td>Body 2</td> <td>Body 3</td> </tr>
  78
+        </tbody>
  79
+    </table>
  80
+
  81
+</body>
  82
+</html>

0 notes on commit d59e2ca

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