| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .containing-block { |
| 6 position: relative; |
| 7 -webkit-transform: translate(0px, 0px); |
| 8 } |
| 9 |
| 10 .clip { |
| 11 overflow: hidden; |
| 12 width: 50px; |
| 13 height: 120px; |
| 14 } |
| 15 |
| 16 .overflow { |
| 17 height: 100px; |
| 18 width: 100px; |
| 19 border: 1px solid black; |
| 20 overflow-y: scroll; |
| 21 resize: both; |
| 22 margin: 10px; |
| 23 } |
| 24 |
| 25 .box { |
| 26 position: relative; |
| 27 z-index: 1; |
| 28 height: 120px; |
| 29 width: 80px; |
| 30 margin: 10px; |
| 31 background-color: blue; |
| 32 } |
| 33 |
| 34 .fixed { |
| 35 position: fixed; |
| 36 background-color: green; |
| 37 width: 40px; |
| 38 height: 40px; |
| 39 top: -10px; |
| 40 } |
| 41 |
| 42 .beneath { |
| 43 z-index: -1; |
| 44 } |
| 45 </style> |
| 46 <script src="../../fast/js/resources/js-test-pre.js"></script> |
| 47 <script> |
| 48 if (window.testRunner) |
| 49 testRunner.dumpAsText(); |
| 50 |
| 51 if (window.internals) { |
| 52 window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled
(true); |
| 53 window.internals.settings.setAcceleratedCompositingForOverflowScrollEnab
led(true); |
| 54 } |
| 55 |
| 56 function setup() { |
| 57 if (window.internals) { |
| 58 document.body.offsetTop; |
| 59 // Ensure that our scroll parent relationships are set up (including |
| 60 // ancestor scroll clip). |
| 61 for (var i = 0; i < 4; ++i) { |
| 62 var overflowId = "overflow-" + (i + 1); |
| 63 var boxId = "box-" + (i + 1); |
| 64 var overflow = document.getElementById(overflowId); |
| 65 var box = document.getElementById(boxId); |
| 66 if (!window.internals.isScrollParent(box, overflow)) { |
| 67 testFailed(overflowId + " was not the scroll parent of " + b
oxId); |
| 68 return; |
| 69 } |
| 70 |
| 71 var containingBlockId = "containing-block-" + (i + 1); |
| 72 var fixedId = "fixed-" + (i + 1); |
| 73 var containingBlock = document.getElementById(containingBlockId)
; |
| 74 var fixed = document.getElementById(fixedId); |
| 75 if (!window.internals.isClipParent(fixed, containingBlock)) { |
| 76 testFailed(containingBlockId + " was not the clip parent of
" + fixedId); |
| 77 return; |
| 78 } |
| 79 |
| 80 var scrollClip = window.internals.scrollClip(overflow); |
| 81 var ancestorScrollClip = window.internals.ancestorScrollClip(box
); |
| 82 if (scrollClip.left != ancestorScrollClip.left || |
| 83 scrollClip.top != ancestorScrollClip.top || |
| 84 scrollClip.width != ancestorScrollClip.width || |
| 85 scrollClip.height != ancestorScrollClip.height) { |
| 86 testFailed("ancestor scroll clip was incorrect. Expected:\n"
+ |
| 87 scrollClip.left + ", " + scrollClip.top + ", " + |
| 88 scrollClip.width + ", " + scrollClip.height + ".\
nActual:\n" + |
| 89 ancestorScrollClip.left + ", " + ancestorScrollCl
ip.top + ", " + |
| 90 ancestorScrollClip.width + ", " + ancestorScrollC
lip.height); |
| 91 } |
| 92 } |
| 93 testPassed("Scroll and clip parents set up correctly"); |
| 94 } else { |
| 95 description("This test ensures that scroll and clip parent " + |
| 96 "relationships are set up correctly and that the scroll
" + |
| 97 "children have a correctly positioned ancestor scroll "
+ |
| 98 "clipping layer."); |
| 99 } |
| 100 } |
| 101 |
| 102 window.onload = setup; |
| 103 </script> |
| 104 <script src="../../fast/js/resources/js-test-post.js"></script> |
| 105 </head> |
| 106 <body> |
| 107 <div class="containing-block" id="containing-block-1"> |
| 108 <div class="overflow" id="overflow-1"> |
| 109 <div class="clip"> |
| 110 <div class="box fixed" id="fixed-1"></div> |
| 111 <div class="box" id="box-1"></div> |
| 112 </div> |
| 113 </div> |
| 114 </div> |
| 115 <div class="containing-block" id="containing-block-2"> |
| 116 <div class="overflow" id="overflow-2"> |
| 117 <div class="box fixed" id="fixed-2"></div> |
| 118 <div class="box beneath" id="box-2"></div> |
| 119 </div> |
| 120 </div> |
| 121 <div class="containing-block" id="containing-block-3"> |
| 122 <div class="overflow" id="overflow-3"> |
| 123 <div class="box fixed" id="fixed-3"></div> |
| 124 <div class="box" id="box-3"></div> |
| 125 </div> |
| 126 </div> |
| 127 <div class="clip"> |
| 128 <div class="containing-block" id="containing-block-4"> |
| 129 <div class="overflow" id="overflow-4"> |
| 130 <div class="box fixed" id="fixed-4"></div> |
| 131 <div class="box" id="box-4"></div> |
| 132 </div> |
| 133 </div> |
| 134 </div> |
| 135 </body> |
| 136 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23903012:
Set up scroll and clip parents (Closed)
Base URL: svn://svn.chromium.org/blink/trunk