| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <style> |
| 3 .positionStatic { position: static; } |
| 4 .positionRelative { position: relative; } |
| 5 .positionAbsolute { position: absolute; } |
| 6 .positionFixed { position: fixed; } |
| 7 |
| 8 #outer { |
| 9 border: 10px solid red; |
| 10 margin: 20px; |
| 11 padding: 30px; |
| 12 } |
| 13 |
| 14 #inner { |
| 15 width: 20px; |
| 16 height: 20px; |
| 17 top: 50%; |
| 18 background: blue; |
| 19 } |
| 20 |
| 21 </style> |
| 22 <div id='outer'> |
| 23 <div id='inner'></div> |
| 24 </div> |
| 25 <script src="../../../resources/js-test.js"></script> |
| 26 <script> |
| 27 var outer = document.querySelector("#outer"); |
| 28 var inner = document.querySelector("#inner"); |
| 29 var computedStyle = window.getComputedStyle(inner, null); |
| 30 |
| 31 outer.className = 'positionStatic'; |
| 32 inner.className = 'positionStatic'; |
| 33 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%"); |
| 34 inner.className = 'positionRelative'; |
| 35 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px"); |
| 36 inner.className = 'positionAbsolute'; |
| 37 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px"); |
| 38 inner.className = 'positionFixed'; |
| 39 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px"); |
| 40 |
| 41 outer.className = 'positionRelative'; |
| 42 inner.className = 'positionStatic'; |
| 43 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%"); |
| 44 inner.className = 'positionRelative'; |
| 45 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px"); |
| 46 inner.className = 'positionAbsolute'; |
| 47 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px"); |
| 48 inner.className = 'positionFixed'; |
| 49 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px"); |
| 50 |
| 51 outer.className = 'positionAbsolute'; |
| 52 inner.className = 'positionStatic'; |
| 53 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%"); |
| 54 inner.className = 'positionRelative'; |
| 55 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px"); |
| 56 inner.className = 'positionAbsolute'; |
| 57 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px"); |
| 58 inner.className = 'positionFixed'; |
| 59 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px"); |
| 60 |
| 61 outer.className = 'positionFixed'; |
| 62 inner.className = 'positionStatic'; |
| 63 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "50%"); |
| 64 inner.className = 'positionRelative'; |
| 65 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "10px"); |
| 66 inner.className = 'positionAbsolute'; |
| 67 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "30px"); |
| 68 inner.className = 'positionFixed'; |
| 69 shouldBeEqualToString("computedStyle.getPropertyValue('top')", "300px"); |
| 70 </script> |
| OLD | NEW |