| OLD | NEW |
|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <style> | 2 <style> |
| 3 body { | 3 body { |
| 4 margin: 0; | 4 margin: 0; |
| 5 } | 5 } |
| 6 #top { | |
| 7 position: relative; | |
| 8 height: 500px; | |
| 9 width: 500px; | |
| 10 } | |
| 11 #container { | 6 #container { |
| 12 position: absolute; | 7 position: absolute; |
| 13 top: 0px; | 8 top: 0px; |
| 14 bottom: 0px; | 9 bottom: 0px; |
| 15 left: 0px; | 10 left: 0px; |
| 16 right: 0px; | 11 right: 0px; |
| 17 overflow: hidden; | 12 overflow: hidden; |
| 18 } | 13 } |
| 19 #test { | 14 #test { |
| 20 position: absolute; | 15 position: absolute; |
| 21 top: 0px; | 16 top: 0px; |
| 22 bottom: 0px; | 17 bottom: 500px; |
| 23 left: 0px; | 18 left: 140px; |
| 24 right: 140px; | 19 right: 540px; |
| 25 overflow: hidden; | 20 overflow: hidden; |
| 26 } | 21 } |
| 27 .contents { | 22 .contents { |
| 28 display: inline-block; | 23 display: inline-block; |
| 29 background-color: green; | 24 background-color: green; |
| 30 height: 100px; | 25 height: 100px; |
| 31 width: 100px; | 26 width: 100px; |
| 32 overflow: hidden; | 27 overflow: hidden; |
| 33 } | 28 } |
| 34 </style> | 29 </style> |
| 35 <script> | 30 <script> |
| 36 | 31 |
| 37 function addChildren(test) | 32 function addChildren(test) |
| 38 { | 33 { |
| 39 for (i = 0; i < 20; i++) { | 34 for (i = 0; i < 20; i++) { |
| 40 box = document.createElement("div"); | 35 box = document.createElement("div"); |
| 41 box.setAttribute('class', 'contents'); | 36 box.setAttribute('class', 'contents'); |
| 42 box.setAttribute('id', i); | 37 box.setAttribute('id', i); |
| 43 test.appendChild(box); | 38 test.appendChild(box); |
| 44 } | 39 } |
| 45 } | 40 } |
| 46 | 41 |
| 47 function runTest() | 42 function runTest() |
| 48 { | 43 { |
| 49 test = document.getElementById("test"); | 44 test = document.getElementById("test"); |
| 50 test.style['margin-left'] = '100%'; | |
| 51 addChildren(test); | 45 addChildren(test); |
| 52 | 46 |
| 53 for (i = 0; i < 20; i++) { | 47 for (i = 0; i < 20; i++) { |
| 54 box = document.getElementById(i); | 48 box = document.getElementById(i); |
| 55 test.removeChild(box); | 49 test.removeChild(box); |
| 56 } | 50 } |
| 57 document.body.offsetTop; | 51 document.body.offsetTop; |
| 58 | 52 |
| 59 addChildren(test); | 53 addChildren(test); |
| 60 document.body.offsetTop; | 54 document.body.offsetTop; |
| 61 | 55 |
| 62 test.style['margin-left'] = 'initial'; | 56 test.style['top'] = '300px'; |
| 63 } | 57 } |
| 64 window.onload = runTest; | 58 window.onload = runTest; |
| 65 </script> | 59 </script> |
| 66 <div id="top"> | 60 <div id="top"> |
| 67 <div id="container"> | 61 <div id="container"> |
| 68 <div id="test"></div> | 62 <div id="test"></div> |
| 69 </div> | 63 </div> |
| 70 </div> | 64 </div> |
| 71 crbug.com/426166: Tests positioned movement layout when it needs to layout child
ren because it's width has changed. | 65 Tests positioned movement layout when its height has changed. |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 722643002:
No need to detect change in size when opting for PositionedMovementLayout (Closed)
Base URL: svn://svn.chromium.org/blink/trunk