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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display-expected.html

Issue 1308273010: Adapt and reland old position sticky implementation (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Make sticky vertical ref tests expectations not dependent on font size. Created 4 years, 8 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 | « third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script>
3 if (window.internals) {
4 internals.settings.setCSSStickyPositionEnabled(true);
5 }
6 </script>
7
8 <html>
9 <head>
10 <style>
11 body {
12 margin: 0;
13 width: 2000px;
14 overflow: hidden; /* hide scrollbars */
15 }
16
17 p {
18 position: relative;
19 left: 100px;
20 }
21
22 .group {
23 position: relative;
24 width: 500px;
25 height: 200px;
26 }
27
28 .container {
29 width: 400px;
30 height: 180px;
31 outline: 2px solid black;
32 }
33
34 .box {
35 width: 200px;
36 height: 180px;
37 }
38
39 .sticky {
40 position: sticky;
41 left: 100px;
42 background-color: green;
43 }
44
45 .indicator {
46 position: absolute;
47 top: 0;
48 left: 0;
49 background-color: red;
50 }
51 </style>
52 <script>
53 function doTest()
54 {
55 window.scrollTo(100, 0);
56 }
57 window.addEventListener('load', doTest, false);
58 </script>
59 </head>
60 <body>
61 <p>Block</p>
62 <div class="group" style="left: 100px">
63 <div class="indicator box" style="left: 100px;"></div>
64 <div class="container">
65 <div class="sticky box"></div>
66 </div>
67 </div>
68
69 <p>Table</p>
70 <div class="group" style="left: 100px">
71 <div class="indicator box" style="left: 100px;"></div>
72 <div class="container">
73 <div class="sticky box"></div>
74 </div>
75 </div>
76
77 <p>Grid</p>
78 <div class="group" style="left: 100px">
79 <div class="indicator box" style="left: 100px;"></div>
80 <div class="container">
81 <div class="sticky box"></div>
82 </div>
83 </div>
84
85 <p>Flex box</p>
86 <div class="group" style="left: 100px">
87 <div class="indicator box" style="left: 100px;"></div>
88 <div class="container">
89 <div class="sticky box"></div>
90 </div>
91 </div>
92 <div style="position: absolute; top: 500px;">
93 This test checks the behavior of position:sticky with various display values.
94 There should be no red.
95 </div>
96 </body>
97 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/sticky-display.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-flexbox.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698