| Index: third_party/WebKit/LayoutTests/compositing/overflow/scrollbar-layer-placement.html
|
| diff --git a/third_party/WebKit/LayoutTests/compositing/overflow/scrollbar-layer-placement.html b/third_party/WebKit/LayoutTests/compositing/overflow/scrollbar-layer-placement.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..2c923a4709907682ed710e25b61165a8d1f11b26
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/compositing/overflow/scrollbar-layer-placement.html
|
| @@ -0,0 +1,119 @@
|
| +<!DOCTYPE html>
|
| +<!--
|
| +Scrollbar layer geometry stress test.
|
| +
|
| +A is a stacking context; its scrollbars are not re-parented.
|
| +
|
| +B gets re-parented, but isn't clipped by any ancestor.
|
| +
|
| +C and D are re-parented, and clipped by two non-stacking ancestors.
|
| +
|
| +One of D's clipping ancestors is positioned, triggering the
|
| +"compositingStackingContext != compositingContainer" path
|
| +in CLM::updateOverflowControlsHostLayerGeometry.
|
| +
|
| +The scrollers, stacking contexts, and outer clipping ancestors
|
| +all have borders (creating non-zero clip offsets) and box shadows
|
| +(causing main GraphicsLayer to be offset from its LayoutObject),
|
| +with varying thicknesses.
|
| +-->
|
| +<script>
|
| +if (window.internals) {
|
| + window.internals.settings.setOverlayScrollbarsEnabled(true);
|
| + window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
|
| +}
|
| +</script>
|
| +<style>
|
| + .outer {
|
| + position: absolute;
|
| + z-index: 0;
|
| + will-change: transform;
|
| + left: 21px;
|
| + top: 21px;
|
| + width: 300px;
|
| + height: 242px;
|
| + box-shadow: 0 0 12px 3px #feb;
|
| + border: 5px solid #eda;
|
| + }
|
| + .C, .D { top: 312px; }
|
| + .B, .D { left: 370px; }
|
| + .clipper {
|
| + overflow: hidden;
|
| + margin-left: 11px;
|
| + margin-top: 11px;
|
| + width: 272px;
|
| + height: 180px;
|
| + border: 3px solid #aaa;
|
| + box-shadow: 0 0 0 7px #afa;
|
| + }
|
| + .D .clipper {
|
| + position: relative;
|
| + }
|
| + .clipper2 {
|
| + overflow: hidden;
|
| + margin-left: 3px;
|
| + margin-top: 3px;
|
| + width: 260px;
|
| + height: 100px;
|
| + border: 3px solid #fac;
|
| + }
|
| + .scroller {
|
| + overflow: auto;
|
| + margin-left: 36px;
|
| + margin-top: 36px;
|
| + width: 220px;
|
| + height: 160px;
|
| + box-shadow: 0 0 12px 12px #aaf;
|
| + border: 5px solid blue;
|
| + background-color: white;
|
| + }
|
| + .clipper .scroller {
|
| + margin-left: 15px;
|
| + margin-top: 15px;
|
| + }
|
| + .A .scroller {
|
| + position: relative;
|
| + z-index: 0;
|
| + }
|
| + .content {
|
| + position: relative;
|
| + height: 200px;
|
| + margin: 12px;
|
| + padding: 6px;
|
| + background-color: #ddd;
|
| + }
|
| +</style>
|
| +<div class="outer A">
|
| +<div class="scroller">
|
| +<div class="content"></div>
|
| +</div>
|
| +</div>
|
| +<div class="outer B">
|
| +<div class="scroller">
|
| +<div class="content"></div>
|
| +</div>
|
| +</div>
|
| +<div class="outer C">
|
| +<div class="clipper">
|
| +<div class="clipper2">
|
| +<div class="scroller">
|
| +<div class="content"></div>
|
| +</div>
|
| +</div>
|
| +</div>
|
| +</div>
|
| +<div class="outer D">
|
| +<div class="clipper">
|
| +<div class="clipper2">
|
| +<div class="scroller">
|
| +<div class="content"></div>
|
| +</div>
|
| +</div>
|
| +</div>
|
| +</div>
|
| +<script>
|
| +if (window.testRunner) {
|
| + testRunner.dumpAsTextWithPixelResults();
|
| + testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
|
| +}
|
| +</script>
|
|
|