| Index: LayoutTests/fast/workers/parallax.html
|
| diff --git a/LayoutTests/fast/workers/parallax.html b/LayoutTests/fast/workers/parallax.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..53ea149af14c4bee8d96a771c0b5552708a544fc
|
| --- /dev/null
|
| +++ b/LayoutTests/fast/workers/parallax.html
|
| @@ -0,0 +1,95 @@
|
| +<!DOCTYPE HTML>
|
| +<link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC' rel='stylesheet' type='text/css'>
|
| +<style>
|
| +
|
| +.card {
|
| + position: absolute;
|
| + left: 10px;
|
| + top: 10px;
|
| + width: 200px;
|
| + height: 200px;
|
| + background: #736F68;
|
| + color: #D9CCC5;
|
| + padding: 20px;
|
| + font-family: 'IM Fell Great Primer SC', serif;
|
| + font-size: 3em;
|
| + border-radius: 5px;
|
| + -webkit-transform: translateZ(0);
|
| +}
|
| +
|
| +body {
|
| + background: #212126;
|
| +}
|
| +
|
| +#raf {
|
| + position: absolute;
|
| + left: 700px;
|
| + top: 10px;
|
| + background: #826B54;
|
| +}
|
| +
|
| +.scroller {
|
| + width: 500px;
|
| + height: 1000px;
|
| + border: 2px solid black;
|
| + overflow-y: scroll;
|
| + background: #736F68;
|
| +}
|
| +
|
| +.scrolled {
|
| + width: 2000px;
|
| + height: 9000px;
|
| + color: #D9CCC5;
|
| + padding: 20px;
|
| + font-family: 'IM Fell Great Primer SC', serif;
|
| + font-size: 3em;
|
| +}
|
| +
|
| +</style>
|
| +<script>
|
| +var worker = null;
|
| +
|
| +onload = function() {
|
| + // Set up worker rAF animation.
|
| + worker = new UIWorker('resources/parallax.js');
|
| + var scroller = document.getElementById('scroller');
|
| + var img = document.getElementById('img');
|
| + worker.postMessage([
|
| + scroller.bindAnimatedProperty('scrollTop'),
|
| + img.bindAnimatedProperty('transform')
|
| + ]);
|
| +}
|
| +
|
| +</script>
|
| +<div id="scroller" class="scroller" z-index="0" style="position: absolute">
|
| + <div id="scrolled" class="scrolled">
|
| + <img id="img" src='http://wvs.topleftpixel.com/photos/scotia_plaza_tall_stitched.jpg' z-index="-1" style="position: absolute; transform: translateY(0)"/>
|
| + <div style="position: absolute">
|
| + This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!
|
| + <p />This<p />stuff<p />is<p />totally<p />scrolled!</div>
|
| + </div>
|
| +</div>
|
|
|
Chromium Code Reviews
Issue 474683003:
Not for review - Rebase of crrev.com/62833003
Base URL: svn://svn.chromium.org/blink/trunk