Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(559)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment.html

Issue 186943003: Add layout test which checks sticky postioning when overflow is scrolled by fragment. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fix indentation. Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script>
5 function done()
6 {
7 if (window.testRunner)
8 window.testRunner.notifyDone();
9 }
10
11 if (window.location.hash == '') {
12 if (window.testRunner)
13 window.testRunner.waitUntilDone();
14 window.onhashchange = done;
15 location = '#hash';
16 }
17 </script>
4 <style> 18 <style>
5 .group { 19 .group {
6 display: inline-block; 20 display: inline-block;
7 position: relative; 21 position: relative;
8 width: 150px; 22 width: 150px;
9 height: 500px; 23 height: 500px;
10 } 24 }
11 25
12 #overflow { 26 #overflow {
13 width: 600px; 27 width: 600px;
14 height: 550px; 28 height: 550px;
15 overflow: hidden; /* Still scrollable with JS */ 29 overflow: hidden; /* Still scrollable with JS */
16 border: 1px solid black; 30 border: 1px solid black;
31 position: relative;
17 } 32 }
18 33
19 .spacer { 34 .spacer {
20 float: left; 35 float: left;
21 width: 10px; 36 width: 10px;
22 height: 1200px; 37 height: 500px;
23 } 38 }
24 .container { 39 .container {
25 width: 100px; 40 width: 100px;
26 height: 400px; 41 height: 400px;
27 outline: 2px solid black; 42 outline: 2px solid black;
28 } 43 }
29 44
30 .box { 45 .box {
31 width: 100px; 46 width: 100px;
32 height: 200px; 47 height: 200px;
33 } 48 }
34 49
50 .hash {
51 width: 600px;
52 height: 10px;
53 background-color: gray;
54 position: absolute;
55 border: 0px;
56 }
57
35 .sticky { 58 .sticky {
36 position: sticky; 59 position: sticky;
37 top: 100px; 60 top: 100px;
38 background-color: green; 61 background-color: green;
39 } 62 }
40 63
41 .indicator { 64 .indicator {
42 position: absolute; 65 position: absolute;
43 top: 0; 66 top: 0;
44 left: 0; 67 left: 0;
45 background-color: red; 68 background-color: red;
46 } 69 }
47 </style> 70 </style>
48 <script>
49 function doTest()
50 {
51 document.getElementById('overflow').scrollTop = 120;
52 }
53 window.addEventListener('load', doTest, false);
54 </script>
55 </head> 71 </head>
56 <body> 72 <body>
57 This test checks that sticky positioned elements are contained by their enclosin g ancestor with an overflow clip.
58 There should be no red.
59 <div id="overflow"> 73 <div id="overflow">
60 <div class="spacer"></div> 74 <div class="spacer"></div>
61 <div class="group"> 75 <div class="group">
62 <div class="indicator box" style="top: 200px;"></div> 76 <div class="indicator box" style="top: 200px;"></div>
63 <div class="container"> 77 <div class="container">
64 <div class="sticky box"></div> 78 <div class="sticky box"></div>
65 </div> 79 </div>
66 </div> 80 </div>
67 81
68 <div class="group" style="top: 100px"> 82 <div class="group" style="top: 100px">
69 <div class="indicator box" style="top: 120px;"></div> 83 <div class="indicator box" style="top: 120px;"></div>
70 <div class="container"> 84 <div class="container">
71 <div class="sticky box"></div> 85 <div class="sticky box"></div>
72 </div> 86 </div>
73 </div> 87 </div>
74 88
75 <div class="group" style="top: 240px"> 89 <div class="group" style="top: 240px">
76 <div class="indicator box" style="top: 0;"></div> 90 <div class="indicator box" style="top: 0;"></div>
77 <div class="container"> 91 <div class="container">
78 <div class="sticky box"></div> 92 <div class="sticky box"></div>
79 </div> 93 </div>
80 </div> 94 </div>
95 <div id="hash" class="hash" style="top: 119px;">
96 </div>
97 </div>
98 <div style="position: absolute; top: 560px;">
99 This test checks that sticky positioning when scrolled by fragment.
100 There should be no red.
81 </div> 101 </div>
82 </body> 102 </body>
83 </html> 103 </html>
104
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css/sticky/sticky-top-overflow-scroll-by-fragment-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698