| Index: LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html
|
| diff --git a/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html b/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1d3addc4dcf1d3f7110a7e49f5d72fb1b7d1f626
|
| --- /dev/null
|
| +++ b/LayoutTests/compositing/overflow/ancestor-scroll-clipping-layer.html
|
| @@ -0,0 +1,136 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| + .containing-block {
|
| + position: relative;
|
| + -webkit-transform: translate(0px, 0px);
|
| + }
|
| +
|
| + .clip {
|
| + overflow: hidden;
|
| + width: 50px;
|
| + height: 120px;
|
| + }
|
| +
|
| + .overflow {
|
| + height: 100px;
|
| + width: 100px;
|
| + border: 1px solid black;
|
| + overflow-y: scroll;
|
| + resize: both;
|
| + margin: 10px;
|
| + }
|
| +
|
| + .box {
|
| + position: relative;
|
| + z-index: 1;
|
| + height: 120px;
|
| + width: 80px;
|
| + margin: 10px;
|
| + background-color: blue;
|
| + }
|
| +
|
| + .fixed {
|
| + position: fixed;
|
| + background-color: green;
|
| + width: 40px;
|
| + height: 40px;
|
| + top: -10px;
|
| + }
|
| +
|
| + .beneath {
|
| + z-index: -1;
|
| + }
|
| +</style>
|
| +<script src="../../fast/js/resources/js-test-pre.js"></script>
|
| +<script>
|
| + if (window.testRunner)
|
| + testRunner.dumpAsText();
|
| +
|
| + if (window.internals) {
|
| + window.internals.settings.setCompositorDrivenAcceleratedScrollingEnabled(true);
|
| + window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true);
|
| + }
|
| +
|
| + function setup() {
|
| + if (window.internals) {
|
| + document.body.offsetTop;
|
| + // Ensure that our scroll parent relationships are set up (including
|
| + // ancestor scroll clip).
|
| + for (var i = 0; i < 4; ++i) {
|
| + var overflowId = "overflow-" + (i + 1);
|
| + var boxId = "box-" + (i + 1);
|
| + var overflow = document.getElementById(overflowId);
|
| + var box = document.getElementById(boxId);
|
| + if (!window.internals.isScrollParent(box, overflow)) {
|
| + testFailed(overflowId + " was not the scroll parent of " + boxId);
|
| + return;
|
| + }
|
| +
|
| + var containingBlockId = "containing-block-" + (i + 1);
|
| + var fixedId = "fixed-" + (i + 1);
|
| + var containingBlock = document.getElementById(containingBlockId);
|
| + var fixed = document.getElementById(fixedId);
|
| + if (!window.internals.isClipParent(fixed, containingBlock)) {
|
| + testFailed(containingBlockId + " was not the clip parent of " + fixedId);
|
| + return;
|
| + }
|
| +
|
| + var scrollClip = window.internals.scrollClip(overflow);
|
| + var ancestorScrollClip = window.internals.ancestorScrollClip(box);
|
| + if (scrollClip.left != ancestorScrollClip.left ||
|
| + scrollClip.top != ancestorScrollClip.top ||
|
| + scrollClip.width != ancestorScrollClip.width ||
|
| + scrollClip.height != ancestorScrollClip.height) {
|
| + testFailed("ancestor scroll clip was incorrect. Expected:\n" +
|
| + scrollClip.left + ", " + scrollClip.top + ", " +
|
| + scrollClip.width + ", " + scrollClip.height + ".\nActual:\n" +
|
| + ancestorScrollClip.left + ", " + ancestorScrollClip.top + ", " +
|
| + ancestorScrollClip.width + ", " + ancestorScrollClip.height);
|
| + }
|
| + }
|
| + testPassed("Scroll and clip parents set up correctly");
|
| + } else {
|
| + description("This test ensures that scroll and clip parent " +
|
| + "relationships are set up correctly and that the scroll " +
|
| + "children have a correctly positioned ancestor scroll " +
|
| + "clipping layer.");
|
| + }
|
| + }
|
| +
|
| + window.onload = setup;
|
| +</script>
|
| +<script src="../../fast/js/resources/js-test-post.js"></script>
|
| +</head>
|
| +<body>
|
| + <div class="containing-block" id="containing-block-1">
|
| + <div class="overflow" id="overflow-1">
|
| + <div class="clip">
|
| + <div class="box fixed" id="fixed-1"></div>
|
| + <div class="box" id="box-1"></div>
|
| + </div>
|
| + </div>
|
| + </div>
|
| + <div class="containing-block" id="containing-block-2">
|
| + <div class="overflow" id="overflow-2">
|
| + <div class="box fixed" id="fixed-2"></div>
|
| + <div class="box beneath" id="box-2"></div>
|
| + </div>
|
| + </div>
|
| + <div class="containing-block" id="containing-block-3">
|
| + <div class="overflow" id="overflow-3">
|
| + <div class="box fixed" id="fixed-3"></div>
|
| + <div class="box" id="box-3"></div>
|
| + </div>
|
| + </div>
|
| + <div class="clip">
|
| + <div class="containing-block" id="containing-block-4">
|
| + <div class="overflow" id="overflow-4">
|
| + <div class="box fixed" id="fixed-4"></div>
|
| + <div class="box" id="box-4"></div>
|
| + </div>
|
| + </div>
|
| + </div>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 23903012:
Set up scroll and clip parents (Closed)
Base URL: svn://svn.chromium.org/blink/trunk