| OLD | NEW |
|---|
| (Empty) |
| 1 <title>Select element scrolling when in transformed container</title> | |
| 2 <script> | |
| 3 | |
| 4 function test() | |
| 5 { | |
| 6 if (window.testRunner) { | |
| 7 testRunner.dumpAsText(); | |
| 8 testRunner.waitUntilDone(); | |
| 9 } | |
| 10 | |
| 11 var triggers = document.querySelectorAll(".scrollTrigger"); | |
| 12 for (var i=0; i < triggers.length; i++) { | |
| 13 triggers[i].scrollIntoView(); | |
| 14 } | |
| 15 document.getElementById("c-inner").scrollIntoView(true); | |
| 16 document.getElementById("d-inner").scrollIntoView(false); | |
| 17 | |
| 18 var selectElements = document.querySelectorAll("select"); | |
| 19 for (i=0; i < selectElements.length; i++) { | |
| 20 selectElements[i].focus(); | |
| 21 } | |
| 22 | |
| 23 var resultString = ""; | |
| 24 var id1, id2, element1, element2, scrollTop1, scrollTop2; | |
| 25 | |
| 26 // The test results should be (for scrollTop) | |
| 27 // a != b | |
| 28 // b == 0 | |
| 29 // c == d | |
| 30 | |
| 31 id1 = "a"; | |
| 32 id2 = "b"; | |
| 33 id3 = "c"; | |
| 34 id4 = "d"; | |
| 35 element1 = document.getElementById(id1); | |
| 36 element2 = document.getElementById(id2); | |
| 37 element3 = document.getElementById(id3); | |
| 38 element4 = document.getElementById(id4); | |
| 39 scrollTop1 = element1.scrollTop; | |
| 40 scrollTop2 = element2.scrollTop; | |
| 41 scrollTop3 = element3.scrollTop; | |
| 42 scrollTop4 = element4.scrollTop; | |
| 43 if (scrollTop1 != scrollTop2) { | |
| 44 resultString += "PASS - Element " + id1 + " and Element " + id2 + " had di
fferent scrollTop<br>"; | |
| 45 } else { | |
| 46 resultString += "FAIL - Element " + id1 + " and Element " + id2 + " had id
entical scrollTop<br>"; | |
| 47 } | |
| 48 | |
| 49 if (scrollTop2 == 0) { | |
| 50 resultString += "PASS - Element " + id2 + " had scrollTop: 0<br>"; | |
| 51 } else { | |
| 52 resultString += "FAIL - Element " + id2 + " had a non-zero scrollTop: " +
scrollTop2 + "<br>"; | |
| 53 } | |
| 54 | |
| 55 if (scrollTop3 == scrollTop4) { | |
| 56 resultString += "PASS - Element " + id3 + " and Element " + id4 + " had sa
me scrollTop<br>"; | |
| 57 } else { | |
| 58 resultString += "FAIL - Element " + id3 + " and Element " + id4 + " had di
fferent scrollTop<br>"; | |
| 59 } | |
| 60 | |
| 61 var results = document.getElementById("results"); | |
| 62 results.innerHTML = resultString; | |
| 63 | |
| 64 if (window.testRunner) { | |
| 65 testRunner.notifyDone(); | |
| 66 } | |
| 67 | |
| 68 } | |
| 69 </script> | |
| 70 <style type="text/css" media="screen"> | |
| 71 body { | |
| 72 margin: 0; | |
| 73 } | |
| 74 | |
| 75 .container { | |
| 76 display: inline-block; | |
| 77 position: relative; | |
| 78 left: 0; | |
| 79 top: 0; | |
| 80 width: 200px; | |
| 81 height: 350px; | |
| 82 overflow: hidden; | |
| 83 background-color: blue; | |
| 84 } | |
| 85 | |
| 86 .scrolled { | |
| 87 position: relative; | |
| 88 left: 0; | |
| 89 top: 0; | |
| 90 font-size: 14px; | |
| 91 background-color: red; | |
| 92 color: white; | |
| 93 } | |
| 94 | |
| 95 .padding { | |
| 96 height: 500px; | |
| 97 } | |
| 98 | |
| 99 .offset { | |
| 100 transform: translateY(-300px); | |
| 101 } | |
| 102 | |
| 103 .scaled { | |
| 104 color: white; | |
| 105 background-color: red; | |
| 106 height: 20px; | |
| 107 transform: scaleY(2.0); | |
| 108 } | |
| 109 </style> | |
| 110 <body onload="test()"> | |
| 111 <p id="message"> | |
| 112 Testing the scrolling behaviour of elements when in a normal and transformed c
ontainer. | |
| 113 On the left is the normal container. On the right are containers containing tr
ansformed elements. | |
| 114 To test this manually, click on the two select elements. The menu popup should | |
| 115 appear directly over the element - the content should not move.<br> | |
| 116 The third and fourth containers tests that scrollIntoView(false) works properl
y in the presence of a scaled element. Because the element is at the bottom of
the container, scrollIntoView should give the same result regardless of flag. | |
| 117 </p> | |
| 118 | |
| 119 <div class="container" id="a"> | |
| 120 <div class="scrolled"> | |
| 121 <p> | |
| 122 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n
ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug
iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp
a qui officia deserunt mollit anim id est laborum. | |
| 123 </p> | |
| 124 <p> | |
| 125 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n
ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug
iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp
a qui officia deserunt mollit anim id est laborum. | |
| 126 </p> | |
| 127 <select> | |
| 128 <option>one</option> | |
| 129 <option>two</option> | |
| 130 <option>three</option> | |
| 131 <option>four</option> | |
| 132 </select> | |
| 133 </div> | |
| 134 </div> | |
| 135 | |
| 136 <div class="container" id="b"> | |
| 137 <div class="scrolled offset"> | |
| 138 <p> | |
| 139 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n
ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug
iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp
a qui officia deserunt mollit anim id est laborum. | |
| 140 </p> | |
| 141 <p> | |
| 142 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tem
por incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n
ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
s aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fug
iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culp
a qui officia deserunt mollit anim id est laborum. | |
| 143 </p> | |
| 144 <select> | |
| 145 <option>one</option> | |
| 146 <option>two</option> | |
| 147 <option>three</option> | |
| 148 <option>four</option> | |
| 149 </select> | |
| 150 </div> | |
| 151 </div> | |
| 152 | |
| 153 <div class="container" id="c"> | |
| 154 <div class="padding"></div> | |
| 155 <div class="scaled" id="c-inner"> | |
| 156 <p>This text should not be cut off</p> | |
| 157 </div> | |
| 158 </div> | |
| 159 | |
| 160 <div class="container" id="d"> | |
| 161 <div class="padding"></div> | |
| 162 <div class="scaled" id="d-inner"> | |
| 163 <p>This text should not be cut off</p> | |
| 164 </div> | |
| 165 </div> | |
| 166 | |
| 167 <br> | |
| 168 | |
| 169 <div id="results"> | |
| 170 </div> | |
| 171 | |
| 172 | |
| 173 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2547723002:
Merge LayoutTests fast/transforms in transforms (Closed)
