OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css"> | 4 <link rel="stylesheet" href="resources/compositor-touch-hit-rects.css"> |
5 <style> | 5 <style> |
6 #inlineOverflow { | 6 #inlineOverflow { |
7 width: 15px; | 7 width: 15px; |
8 } | 8 } |
9 #absoluteChild { | 9 #absoluteChild { |
10 position: absolute; | 10 position: absolute; |
(...skipping 19 matching lines...) Expand all Loading... |
30 height: 10px; | 30 height: 10px; |
31 } | 31 } |
32 #overhangingFloatingChild { | 32 #overhangingFloatingChild { |
33 width: 100px; | 33 width: 100px; |
34 float: left; | 34 float: left; |
35 } | 35 } |
36 #tests > #transform3d { | 36 #tests > #transform3d { |
37 margin-top: 15px; | 37 margin-top: 15px; |
38 margin-bottom: 10px; | 38 margin-bottom: 10px; |
39 } | 39 } |
| 40 #withNegativeOffsetChild { |
| 41 position: relative; |
| 42 width: 100px; |
| 43 height: 10px; |
| 44 border: 1px dotted blue; |
| 45 transform: translateX(calc(120%)) translateZ(0); |
| 46 clear: both; |
| 47 } |
| 48 #negativeOffsetChild { |
| 49 position: absolute; |
| 50 width: 100px; |
| 51 height: 10px; |
| 52 left: calc(-110%); |
| 53 top: 0px; |
| 54 } |
40 #transform3dChild { | 55 #transform3dChild { |
41 -webkit-transform: rotate3d(0.2, 1, 0, 50grad); | 56 -webkit-transform: rotate3d(0.2, 1, 0, 50grad); |
42 } | 57 } |
43 #list > li { | 58 #list > li { |
44 /* Move the list item over to make sure it doesn't overlap with the list itsel
f */ | 59 /* Move the list item over to make sure it doesn't overlap with the list itsel
f */ |
45 -webkit-transform: translate(300px, 0); | 60 -webkit-transform: translate(300px, 0); |
46 } | 61 } |
47 svg { | 62 svg { |
48 width: 100px; | 63 width: 100px; |
49 height: 10px; | 64 height: 10px; |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
85 <div class="testcase" id="transform2d"> | 100 <div class="testcase" id="transform2d"> |
86 Transformed 2D | 101 Transformed 2D |
87 </div> | 102 </div> |
88 <div class="testcase" id="overhangingContainer"> | 103 <div class="testcase" id="overhangingContainer"> |
89 <div id="overhangingFloatingChild">Overhanging float overhanging float</div> | 104 <div id="overhangingFloatingChild">Overhanging float overhanging float</div> |
90 </div> | 105 </div> |
91 <div style="clear: both;"></div> | 106 <div style="clear: both;"></div> |
92 <div class="testcase" id="transform3d"> | 107 <div class="testcase" id="transform3d"> |
93 <div id="transform3dChild">Transformed 3D</div> | 108 <div id="transform3dChild">Transformed 3D</div> |
94 </div> | 109 </div> |
| 110 <div id="withNegativeOffsetChild"> |
| 111 <div id="negativeOffsetChild" class="testcase"></div> |
| 112 </div> |
95 <div> | 113 <div> |
96 <b class="testcase" id="continuation"> | 114 <b class="testcase" id="continuation"> |
97 This b tag | 115 This b tag |
98 <div>causes a</div> | 116 <div>causes a</div> |
99 continuation | 117 continuation |
100 </b> | 118 </b> |
101 </div> | 119 </div> |
102 <div> | 120 <div> |
103 <span class="testcase" id="inlineAbsoluteChildContainer"> | 121 <span class="testcase" id="inlineAbsoluteChildContainer"> |
104 Inline with absolute child | 122 Inline with absolute child |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
140 }; | 158 }; |
141 | 159 |
142 // Make fixed-position cases slightly more interesting | 160 // Make fixed-position cases slightly more interesting |
143 window.scrollTo(0, 13); | 161 window.scrollTo(0, 13); |
144 | 162 |
145 if (window.internals) { | 163 if (window.internals) { |
146 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(fa
lse); | 164 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(fa
lse); |
147 } | 165 } |
148 </script> | 166 </script> |
149 </body> | 167 </body> |
OLD | NEW |