2017-05-08 James Craig <jcraig@apple.com>

        More demo files for prefers-reduced-motion post
        https://bugs.webkit.org/show_bug.cgi?id=170663

        Unreviewed.

        * blog-files/prefers-reduced-motion/jaws.gif: Added.
        * blog-files/prefers-reduced-motion/jaws.jpg: Added.
        * blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@216359 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog
index f53e1c6..55e381a 100644 (file)
--- a/Websites/webkit.org/ChangeLog
+++ b/Websites/webkit.org/ChangeLog
@@ -1,3 +1,14 @@
+2017-05-08  James Craig  <jcraig@apple.com>
+
+        More demo files for prefers-reduced-motion post
+        https://bugs.webkit.org/show_bug.cgi?id=170663
+
+        Unreviewed.
+
+        * blog-files/prefers-reduced-motion/jaws.gif: Added.
+        * blog-files/prefers-reduced-motion/jaws.jpg: Added.
+        * blog-files/prefers-reduced-motion/prm.htm: New animated GIF example.
+
 2017-04-24  James Craig  <jcraig@apple.com>
 
         Upload demo files for prefers-reduced-motion post

diff --git a/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif b/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif
new file mode 100644 (file)
index 0000000..b1a5642
Binary files /dev/null and b/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.gif differ

diff --git a/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg b/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg
new file mode 100644 (file)
index 0000000..a54b190
Binary files /dev/null and b/Websites/webkit.org/blog-files/prefers-reduced-motion/jaws.jpg differ

diff --git a/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm b/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm
index 3d11fd1..dc79367 100644 (file)
--- a/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm
+++ b/Websites/webkit.org/blog-files/prefers-reduced-motion/prm.htm
@@ -152,5 +152,21 @@ motionQuery.addListener(handleReduceMotionChanged); // Note: https://webkit.org/
 
 </script>
 
+
+<h2>Example 4: Only display animated version if prefers-reduced-motion is both supported *and* off.</h2>
+<p>This example uses a more explicit match for <code>(prefers-reduced-motion: no-preference)</code> which excludes all browsers that don't yet support the new feature.</p>
+<img id="jaws" src="jaws.jpg" alt="Brody realizing the shark is in the water" width="480" height="214">
+
+<script type="text/javascript">
+
+var motionQuery2 = matchMedia('(prefers-reduced-motion: no-preference)'); 
+function handleReduceMotionChanged2() {
+    document.images['jaws'].src = motionQuery2.matches ? 'jaws.gif' : 'jaws.jpg';
+}
+handleReduceMotionChanged2(); // trigger this once on load to set up the initial value
+motionQuery.addListener(handleReduceMotionChanged2); // Note: https://webkit.org/b/168491
+
+</script>
+
 </body>
 </html>
\ No newline at end of file