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

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

Issue 178453002: Add tests for sticky and various display values (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Simplify grid and flexbox tests 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-display-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 2
3 <html> 3 <html>
4 <head> 4 <head>
5 <style> 5 <style>
6 body { 6 body {
7 margin: 0; 7 margin: 0;
8 width: 2000px; 8 width: 2000px;
9 overflow: hidden; /* hide scrollbars */ 9 overflow: hidden; /* hide scrollbars */
10 } 10 }
11 11
12 p {
13 position: relative;
14 left: 100px;
15 }
16
12 .group { 17 .group {
13 position: relative; 18 position: relative;
14 width: 500px; 19 width: 500px;
15 height: 200px; 20 height: 200px;
16 } 21 }
17 22
18 .container { 23 .container {
19 width: 400px; 24 width: 400px;
20 height: 180px; 25 height: 180px;
21 outline: 2px solid black; 26 outline: 2px solid black;
22 } 27 }
23 28
24 .box { 29 .box {
25 width: 200px; 30 width: 200px;
26 height: 180px; 31 height: 180px;
27 } 32 }
28 33
29 .sticky { 34 .sticky {
30 position: sticky; 35 position: sticky;
31 left: 100px; 36 left: 100px;
32 background-color: green; 37 background-color: green;
33 } 38 }
34 39
35 .indicator { 40 .indicator {
36 position: absolute; 41 position: absolute;
37 top: 0; 42 top: 0;
38 left: 0; 43 left: 0;
39 background-color: red; 44 background-color: red;
40 } 45 }
41 </style> 46 </style>
42 <script> 47 <script>
43 function doTest() 48 function doTest()
44 { 49 {
45 window.scrollTo(100, 0); 50 window.scrollTo(100, 0);
46 } 51 }
47 window.addEventListener('load', doTest, false); 52 window.addEventListener('load', doTest, false);
48 </script> 53 </script>
49 </head> 54 </head>
50 <body> 55 <body>
51 <div class="group"> 56 <p>Block</p>
52 <div class="indicator box" style="left: 200px;"></div>
53 <div class="container">
54 <div class="sticky box"></div>
55 </div>
56 </div>
57
58 <div class="group" style="left: 100px"> 57 <div class="group" style="left: 100px">
59 <div class="indicator box" style="left: 100px;"></div> 58 <div class="indicator box" style="left: 100px;"></div>
60 <div class="container"> 59 <div class="container">
61 <div class="sticky box"></div> 60 <div class="sticky box"></div>
62 </div> 61 </div>
63 </div> 62 </div>
64 63
65 <div class="group" style="left: 200px"> 64 <p>Table</p>
66 <div class="indicator box" style="left: 0;"></div> 65 <div class="group" style="left: 100px">
66 <div class="indicator box" style="left: 100px;"></div>
67 <div class="container"> 67 <div class="container">
68 <div class="sticky box"></div> 68 <div class="sticky box" style="display: table"></div>
69 </div> 69 </div>
70 </div> 70 </div>
71
72 <p>Grid</p>
73 <div class="group" style="left: 100px">
74 <div class="indicator box" style="left: 100px;"></div>
75 <div class="container">
76 <div class="sticky box" style="display: grid"></div>
77 </div>
78 </div>
79
80 <p>Flex box</p>
81 <div class="group" style="left: 100px">
82 <div class="indicator box" style="left: 100px;"></div>
83 <div class="container">
84 <div class="sticky box" style="display: flex"></div>
85 </div>
86 </div>
87 <div style="position: absolute; top: 500px;">
88 This test checks the behavior of position:sticky with various display values.
89 There should be no red.
90 </div>
71 </body> 91 </body>
72 </html> 92 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css/sticky/sticky-display-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698