1 files changed, 63 insertions, 0 deletions
diff --git a/testing/web-platform/tests/scroll-animations/view-timelines/range-boundary-ref.html b/testing/web-platform/tests/scroll-animations/view-timelines/range-boundary-ref.html
new file mode 100644
index 0000000000..057d0afabc
--- /dev/null
+++ b/testing/web-platform/tests/scroll-animations/view-timelines/range-boundary-ref.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title></title>
+</head>
+<style type="text/css">
+  .scroller {
+    display:  inline-block;
+    border: 2px solid black;
+    height:  100px;
+    width:  100px;
+    overflow: hidden;
+  }
+  .box {
+    background: gray;
+    height: 50px;
+    width: 50px;
+    margin: 0;
+  }
+  .half-shift {
+    transform:  translateX(25px);
+  }
+  .full-shift {
+    transform: translateX(50px);
+  }
+  .blue {
+    background-color:  #99f;
+  }
+  .green {
+    background-color: #9f9;
+  }
+</style>
+<body>
+  <div id="scroller-1" class="scroller">
+    <div class="box green"></div>
+    <div class="box blue full-shift"></div>
+  </div>
+  <div id="scroller-2" class="scroller">
+    <div class="box"></div>
+    <div class="box blue"></div>
+  </div>
+  <br>
+  <div id="scroller-3" class="scroller">
+    <div class="box"></div>
+    <div class="box blue"></div>
+  </div>
+  <div id="scroller-4" class="scroller">
+    <div class="box"></div>
+    <div class="box green"></div>
+  </div>
+  <br>
+  <div id="scroller-5" class="scroller">
+    <div class="box blue"></div>
+    <div class="box half-shift green"></div>
+  </div>
+  <div id="scroller-6" class="scroller">
+    <div class="box"></div>
+    <div class="box green"></div>
+  </div>
+</body>
+</html>