third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained.html - Issue 2788053002: Fix sticky bottom is not applied with both sticky position

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained.html

Issue 2788053002: Fix sticky bottom is not applied with both sticky position (Closed)

Patch Set: Test cases modified. Created 3 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides.html ('k') | third_party/WebKit/LayoutTests/fast/css/sticky/sticky-both-sides-bottom-right-constrained-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 <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: 5000px;

	14 overflow: hidden; /* hide scrollbars */

	15 }

	16

	17 .container {

	18 position: absolute;

	19 width: 5000px;

	20 height: 180px;

	21 top: 100px;

	22 outline: 2px solid black;

	23 }

	24

	25 .vertical_container {
	flackr 2017/04/04 02:31:58 Use dashes for class names: https://www.chromium.o Use dashes for class names: https://www.chromium.org/developers/web-development-style-guide wanchang 2017/04/04 08:19:11 Done. Show quoted text On 2017/04/04 02:31:58, flackr wrote: > Use dashes for class names: > https://www.chromium.org/developers/web-development-style-guide Done.
	26 position: absolute;

	27 top: 0px;

	28 left: 100px;

	29 width: 180px;

	30 height: 5000px;

	31 outline: 2px solid black;

	32 }

	33

	34 .box {

	35 width: 300px;

	36 height: 180px;

	37 }

	38

	39 .vertical_box {

	40 width: 180px;

	41 height: 300px;

	42 }
	flackr 2017/04/04 02:31:58 The only elements with the .box class are sticky, The only elements with the .box class are sticky, let's move these styles to the sticky class. wanchang 2017/04/04 08:19:11 Done. Show quoted text On 2017/04/04 02:31:58, flackr wrote: > The only elements with the .box class are sticky, let's move these styles to the > sticky class. Done.
	43

	44 .sticky {

	45 position: sticky;

	46 left: 50px;

	47 right: 50px;

	48 background-color: green;

	49 }

	50

	51 .vertical_sticky {

	52 position: sticky;

	53 top: 50px;

	54 bottom: 50px;

	55 background-color: blue;

	56 opacity: 0.75;

	57 }

	58 .space {

	59 width:2000px;

	60 height:100%;

	61 background-color: grey;

	62 opacity: 0.1;

	63 }

	64 .vertical_space {

	65 height:2000px;

	66 background-color: grey;

	67 opacity: 0.1;
	flackr 2017/04/04 02:31:58 If I may make a suggestion, rather than repeating If I may make a suggestion, rather than repeating all of the styles, use a common base class with a horizontal or vertical modifier. i.e. .space { background-color: grey; opacity: 0.1; } .horizontal .space { width: 2000px; height: 100%; } .vertical .space { height: 2000px; width: 100%; } <div class="horizontal container"> <div class="space"></div> </div> <div class="vertical container"> <div class="space"></div> </div> Same for .sticky and .container. wanchang 2017/04/04 08:19:11 Done. Show quoted text On 2017/04/04 02:31:58, flackr wrote: > If I may make a suggestion, rather than repeating all of the styles, use a > common base class with a horizontal or vertical modifier. > > i.e. > .space { > background-color: grey; > opacity: 0.1; > } > .horizontal .space { > width: 2000px; > height: 100%; > } > .vertical .space { > height: 2000px; > width: 100%; > } > > <div class="horizontal container"> > <div class="space"></div> > </div> > <div class="vertical container"> > <div class="space"></div> > </div> > > Same for .sticky and .container. Done.
	68 }

	69 .inline {

	70 display: inline-block;

	71 }

	72 </style>

	73 </head>

	74 <body>

	75 <div class="container">

	76 <div class="space inline"></div>

	77 <div class="sticky box inline"></div>

	78 </div>

	79 <div class="vertical_container">

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

	81 <div class="vertical_sticky vertical_box"></div>

	82 </div>

	83

	84 </body>

	85 </html>

	86

OLD	NEW