Commit 2cb41f23 authored by Boris Chiou's avatar Boris Chiou
Browse files

Bug 1741255 - Add wpt print tests for basic scroll animations. r=hiro 

For the following basic cases:
1. a scroll linked animation linked to the root scroller
2. a scroll linked animation linked to an element
3. a scroll linked animation linked to the root scroller of an iframe

There is one assertion in
at-scroll-timeline-default-descriptors-print.tentative.html, and it may not be
related to scroll animations framework, so just mark the max-asserts in meta
file and put the bug number in its comment.

Differential Revision: https://phabricator.services.mozilla.com/D133600
parent a6ce72cb

testing/web-platform/meta/scroll-animations/css/at-scroll-timeline-default-descriptors-print.tentative.html.ini

0 → 100644
+2 −0
Original line number Diff line number Diff line 
[at-scroll-timeline-default-descriptors-print.tentative.html]

  max-asserts: 1 # Bug 1746116, an assertion to check "nextFrame || kidStatus.NextInFlowNeedsReflow()" in nsCanvasFrame::Reflow().

testing/web-platform/meta/scroll-animations/css/at-scroll-timeline-specified-scroller-print.html.ini

0 → 100644
+2 −0
Original line number Diff line number Diff line 
[at-scroll-timeline-specified-scroller-print.html]

  expected: FAIL

testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-default-descriptors-iframe-print.html

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

<html class="reftest-wait">

<title>The default scroll-timeline at rule in the iframe for print</title>

<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">

<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">

<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">

<link rel="match" href="at-scroll-timeline-default-descriptors-iframe-ref.html">



<iframe id="target" width="400" height="400" srcdoc='

  <html>

  <style>

    @keyframes update {

      from { transform: translateY(0px); }

      to { transform: translateY(200px); }

    }

    @scroll-timeline test-timeline {

      source: auto;

      orientation: auto;

      scroll-offsets: none;

    }

    html {

      min-height: 100%;

      padding-bottom: 100px;

    }

    #box {

      width: 100px;

      height: 100px;

      background-color: green;

      animation: update 1s linear;

      animation-timeline: test-timeline;

    }

    #covered {

      width: 100px;

      height: 100px;

      background-color: red;

    }



    * {

      margin-top: 0px;

      margin-bottom: 0px;

    }

  </style>

  <script>

    window.addEventListener("load", function() {

      const scroller = document.scrollingElement;



      // Move the scroller to the halfway point.

      const maxScroll = scroller.scrollHeight - scroller.clientHeight;

      scroller.scrollTop = 0.5 * maxScroll;



      window.requestAnimationFrame(() => {

        window.parent.postMessage("ready", "*");

      });

    });

  </script>

  <body>

    <div id="box"></div>

    <div id="covered"></div>

  </body>

  </html>

'></iframe>



<script>

  window.addEventListener("message", event => {

    if (event.data == "ready") {

      document.documentElement.classList.remove("reftest-wait");

    }

  }, false);

</script>

testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-default-descriptors-print.tentative.html

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

<html class="reftest-wait">

<title>The default scroll-timeline at rule for print</title>

<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-timeline-at-rule">

<link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline">

<meta name="assert" content="CSS animation correctly updates values when using the default scroll-timeline at rule">

<link rel="match" href="at-scroll-timeline-default-descriptors-ref.html">



<style>

  @keyframes update {

    from { transform: translateY(0px); }

    to { transform: translateY(200px); }

  }



  @scroll-timeline test-timeline {

    source: auto;

    orientation: auto;

    scroll-offsets: none;

  }



  html {

    min-height: 100%;

    padding-bottom: 100px;

  }



  #box {

    width: 100px;

    height: 100px;

    background-color: green;

    animation: update 1s linear;

    animation-timeline: test-timeline;

  }



  #covered {

    width: 100px;

    height: 100px;

    background-color: red;

  }



  * {

    margin-top: 0px;

    margin-bottom: 0px;

  }

</style>



<div id="box"></div>

<div id="covered"></div>



<script>

  window.addEventListener('load', function() {

    const scroller = document.scrollingElement;



    // Move the scroller to the halfway point.

    const maxScroll = scroller.scrollHeight - scroller.clientHeight;

    scroller.scrollTop = 0.5 * maxScroll;



    window.requestAnimationFrame(() => {

      document.documentElement.classList.remove("reftest-wait");

    });

  });

</script>

testing/web-platform/tests/scroll-animations/css/at-scroll-timeline-specified-scroller-print-ref.html

0 → 100644
+38 −0
Original line number Diff line number Diff line 
<!DOCTYPE html>

<html class="reftest-wait">

<title>Reference for @scroll-timeline with a specified scroller</title>

<style>

  #scroller {

    overflow: scroll;

    width: 100px;

    height: 100px;

    scrollbar-width: none;

  }



  #contents {

    height: 200px;

  }



  #box {

    width: 100px;

    height: 100px;

    background-color: green;

    transform: translateX(50px);

  }

</style>



<div id="scroller">

  <div id="contents"></div>

</div>

<div id="box"></div>



<script>

  window.addEventListener('load', function() {

    const scroller = document.getElementById("scroller");

    // Move the scroller to the halfway point.

    const maxScroll = scroller.scrollHeight - scroller.clientHeight;

    scroller.scrollTop = 0.5 * maxScroll;



    document.documentElement.classList.remove("reftest-wait");

  });

</script>