Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / overflow / repaint-after-losing-scrollbars.html
blob0fb77890a295b526d4b6f0c87e8ed01b98b7faa7
1 <!DOCTYPE html>
2 <!-- there should be four green squares and no visible red -->
3 <script src="../../resources/run-after-layout-and-paint.js"></script>
4 <style>
5 .container {
6 width: 100px;
7 height:100px;
8 background-color: green;
9 position:absolute;
10 transform:translateZ(0);
11 overflow:auto;
14 ::-webkit-scrollbar {
15 background-color: red;
18 ::-webkit-resizer {
19 background-color: red;
22 .content {
23 transform: translateZ(0);
24 position:absolute;
25 width:10px;
26 height:10px;
29 .tall {
30 height:200px;
33 .wide {
34 width:200px;
37 .resizeWidget {
38 resize: both;
41 </style>
42 <div class="container">
43 <div id="vertical" class="content tall"></div>
44 </div>
45 <div class="container" style="left: 150px">
46 <div id="horizontal" class="content wide"></div>
47 </div>
48 <div class="container" style="left: 300px">
49 <div id="both" class="content tall wide"></div>
50 </div>
51 <div id="corner" class="container resizeWidget" style="left: 450px">
52 <div class="content"></div>
53 </div>
54 <script>
55 function finishTest() {
56 document.getElementById("vertical").classList.remove("tall"); // topmost div loses a vertical scrollbar
57 document.getElementById("horizontal").classList.remove("wide"); // second div loses a horizontal scrollbar
58 document.getElementById("both").classList.remove("wide"); // third div loses both
59 document.getElementById("both").classList.remove("tall"); // vertical and horizontal scrollbars
60 document.getElementById("corner").classList.remove("resizeWidget"); // bottom div loses a resize corner but no scrollbars
61 if (window.testRunner)
62 testRunner.notifyDone();
65 if (window.testRunner) {
66 testRunner.dumpAsTextWithPixelResults();
67 testRunner.waitUntilDone();
70 runAfterLayoutAndPaint(finishTest);
71 </script>