Commit 27155b69 authored by Kris Taeleman's avatar Kris Taeleman
Browse files

Bug 1610731 - Add more tests for position:fixed and position:sticky. r=botond 

Note that the sticky-top test still fails on non-WebRender, but that's outside
the scope of this bug.

Differential Revision: https://phabricator.services.mozilla.com/D69560

--HG--
rename : layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html => layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1.html
rename : layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html => layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html
rename : layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html => layout/reftests/async-scrolling/dynamic-toolbar-sticky-top-1.html
extra : moz-landing-system : lando
parent 564741ef

layout/reftests/async-scrolling/dynamic-toolbar-fixed-bottom-1.html

+1 −1
Original line number Diff line number Diff line 
<!DOCTYPE HTML>

<!--

  Tests that setting a fixed bottom margin in AsyncCompositionManager results

  Tests that setting a fixed bottom margin in the compositor results

  in the margin being applied to an element fixed to the bottom.



  The fixed margin is specified as a test-pref in reftest.list.

layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1-ref.html

0 → 100644
+25 −0
Original line number Diff line number Diff line 
<!DOCTYPE HTML>

<html>

<meta name="viewport" content="width=device-width">

<style>

html {

    scrollbar-width: none;

}

#scrolled {

    height: 2000px;

    width: 100%;

}

#fixed {

    width: 100%;

    height: 200px;

    position: fixed;

    top: 0;

    background: red;

    margin-top: 50px;

}

</style>

<body>

  <div id="scrolled"></div>

  <div id="fixed"></div>

</body>

</html>

layout/reftests/async-scrolling/dynamic-toolbar-fixed-top-1.html

0 → 100644
+36 −0
Original line number Diff line number Diff line 
<!DOCTYPE HTML>

<!--

  Tests that setting a fixed top margin in the compositor results

  in the margin being applied to an element fixed to the top.



  The fixed margin is specified as a test-pref in reftest.list.



  The purpose of the fixed margin is to compensate for the transform that the

  dynamic toolbar applies to the entire content area. We don't have a way of

  simulating that transform in a reftest, so the fixed margin in isolation will

  cause the fixed element to be offset from the top of the screen, and in

  the ref page we use a regular CSS "margin-top" to match the rendering.

-->

<html>

<meta name="viewport" content="width=device-width">

<style>

html {

    scrollbar-width: none;

}

#scrolled {

    height: 2000px;

    width: 100%;

}

#fixed {

    width: 100%;

    height: 200px;

    position: fixed;

    top: 0;

    background: red;

}

</style>

<body>

  <div id="scrolled"></div>

  <div id="fixed"></div>

</body>

</html>

layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1-ref.html

0 → 100644
+29 −0
Original line number Diff line number Diff line 
<html>

<meta name="viewport" content="width=device-width">

<style>

html {

    scrollbar-width: none;

}

#scrolled {

    display: flex;

    justify-content: space-around;

    align-items: flex-start;



    height: 2000px;

    width: 100%;

}

#sticky {

    width: 100%;

    height: 200px;

    position: sticky;

    bottom: 70px;

    background: red;

    align-self: flex-end;

}

</style>

<body>

  <div id="scrolled">

    <div id="sticky"></div>

  </div>

</body>

</html>

layout/reftests/async-scrolling/dynamic-toolbar-sticky-bottom-1.html

0 → 100644
+41 −0
Original line number Diff line number Diff line 
<!DOCTYPE HTML>

<!--

  Tests that setting a fixed bottom margin in the compositor results

  in the margin being applied to an element sticky to the bottom.



  The fixed margin is specified as a test-pref in reftest.list.



  The purpose of the fixed margin is to compensate for the transform that the

  dynamic toolbar applies to the entire content area. We don't have a way of

  simulating that transform in a reftest, so the fixed margin in isolation will

  cause the sticky element to be offset from the bottom of the screen.

-->

<html>

<meta name="viewport" content="width=device-width">

<style>

html {

    scrollbar-width: none;

}

#scrolled {

    display: flex;

    justify-content: space-around;

    align-items: flex-start;



    height: 2000px;

    width: 100%;

}

#sticky {

    width: 100%;

    height: 200px;

    position: sticky;

    bottom: 20px;

    background: red;

    align-self: flex-end;

}

</style>

<body>

  <div id="scrolled">

    <div id="sticky"></div>

  </div>

</body>

</html>