LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html - Issue 346603007: Remove position: sticky

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

Issue 346603007: Remove position: sticky (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Created 6 years, 5 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/fast/css/sticky/sticky-both-sides-expected.html ('k') | LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2

3 <html>

4 <head>

5 <style>

6 .group {

7 display: inline-block;

8 position: relative;

9 width: 150px;

10 height: 500px;

11 }

12

13 #overflow {

14 width: 600px;

15 height: 400px;

16 overflow: hidden; /* Still scrollable with JS */

17 padding: 20px;

18 border: 1px solid black;

19 }

20

21 .spacer {

22 float: left;

23 width: 10px;

24 height: 1200px;

25 }

26 .container {

27 width: 100px;

28 height: 300px;

29 outline: 2px solid black;

30 }

31

32 .box {

33 width: 100px;

34 height: 150px;

35 }

36

37 .sticky {

38 position: sticky;

39 bottom: 0px;

40 background-color: green;

41 }

42

43 .indicator {

44 position: absolute;

45 top: 0;

46 left: 0;

47 background-color: red;

48 }

49 </style>

50 <script>

51 function doTest()

52 {

53 document.getElementById('overflow').scrollTop = 100;

54 }

55 window.addEventListener('load', doTest, false);

56 </script>

57 </head>

58 <body>

59 <div id="overflow">

60 <div class="spacer"></div>

61 <div class="group" style="top: 350px">

62 <div class="indicator box" style="top: 0px;"></div>

63 <div class="container">

64 <div class="box"></div>

65 <div class="sticky box"></div>

66 </div>

67 </div>

68

69 <div class="group" style="top: 250px">

70 <div class="indicator box" style="top: 100px;"></div>

71 <div class="container">

72 <div class="box"></div>

73 <div class="sticky box"></div>

74 </div>

75 </div>

76

77 <div class="group" style="top: 200px">

78 <div class="indicator box" style="top: 150px;"></div>

79 <div class="container">

80 <div class="box"></div>

81 <div class="sticky box"></div>

82 </div>

83 </div>

84 </div>

85 <div style="position: absolute; top: 500px;">

86 This test checks that sticky positioned blocks positioned correctly in overf low with padding.

87 There should be no red.

88 </div>

89 </body>

90 </html>

OLD	NEW