More examples for the wide-gamut demo.
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Jun 2016 02:33:42 +0000 (02:33 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 25 Jun 2016 02:33:42 +0000 (02:33 +0000)
* blog-files/color-gamut/Iceland-P3.jpg: Added.
* blog-files/color-gamut/Iceland-oog.jpg: Added.
* blog-files/color-gamut/Iceland-sRGB.jpg: Added.
* blog-files/color-gamut/Italy-P3.jpg: Added.
* blog-files/color-gamut/Italy-oog.jpg: Added.
* blog-files/color-gamut/Italy-sRGB.jpg: Added.
* blog-files/color-gamut/Sunset-AdobeRGB.jpg: Added.
* blog-files/color-gamut/Sunset-P3.jpg: Added.
* blog-files/color-gamut/Sunset-oog.jpg: Added.
* blog-files/color-gamut/Sunset-sRGB.jpg: Added.
* blog-files/color-gamut/Webkit-logo-sRGB.png:
* blog-files/color-gamut/YellowFlower-P3.jpg: Added.
* blog-files/color-gamut/YellowFlower-oog.jpg: Added.
* blog-files/color-gamut/YellowFlower-sRGB.jpg: Added.
* blog-files/color-gamut/index.html:

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

16 files changed:
Websites/webkit.org/ChangeLog
Websites/webkit.org/blog-files/color-gamut/Iceland-P3.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Iceland-oog.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Iceland-sRGB.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Italy-P3.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Italy-oog.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Italy-sRGB.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Sunset-AdobeRGB.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Sunset-P3.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Sunset-oog.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Sunset-sRGB.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/Webkit-logo-sRGB.png
Websites/webkit.org/blog-files/color-gamut/YellowFlower-P3.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/YellowFlower-oog.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/YellowFlower-sRGB.jpg [new file with mode: 0644]
Websites/webkit.org/blog-files/color-gamut/index.html

index 3791d57..32699d5 100644 (file)
@@ -1,5 +1,25 @@
 2016-06-24  Dean Jackson  <dino@apple.com>
 
+        More examples for the wide-gamut demo.
+
+        * blog-files/color-gamut/Iceland-P3.jpg: Added.
+        * blog-files/color-gamut/Iceland-oog.jpg: Added.
+        * blog-files/color-gamut/Iceland-sRGB.jpg: Added.
+        * blog-files/color-gamut/Italy-P3.jpg: Added.
+        * blog-files/color-gamut/Italy-oog.jpg: Added.
+        * blog-files/color-gamut/Italy-sRGB.jpg: Added.
+        * blog-files/color-gamut/Sunset-AdobeRGB.jpg: Added.
+        * blog-files/color-gamut/Sunset-P3.jpg: Added.
+        * blog-files/color-gamut/Sunset-oog.jpg: Added.
+        * blog-files/color-gamut/Sunset-sRGB.jpg: Added.
+        * blog-files/color-gamut/Webkit-logo-sRGB.png:
+        * blog-files/color-gamut/YellowFlower-P3.jpg: Added.
+        * blog-files/color-gamut/YellowFlower-oog.jpg: Added.
+        * blog-files/color-gamut/YellowFlower-sRGB.jpg: Added.
+        * blog-files/color-gamut/index.html:
+
+2016-06-24  Dean Jackson  <dino@apple.com>
+
         Change something in the webkit.org directory in the hope
         it will kick off a website update.
 
diff --git a/Websites/webkit.org/blog-files/color-gamut/Iceland-P3.jpg b/Websites/webkit.org/blog-files/color-gamut/Iceland-P3.jpg
new file mode 100644 (file)
index 0000000..d94f6c8
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Iceland-P3.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Iceland-oog.jpg b/Websites/webkit.org/blog-files/color-gamut/Iceland-oog.jpg
new file mode 100644 (file)
index 0000000..09e66da
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Iceland-oog.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Iceland-sRGB.jpg b/Websites/webkit.org/blog-files/color-gamut/Iceland-sRGB.jpg
new file mode 100644 (file)
index 0000000..ff6e3be
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Iceland-sRGB.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Italy-P3.jpg b/Websites/webkit.org/blog-files/color-gamut/Italy-P3.jpg
new file mode 100644 (file)
index 0000000..ac95208
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Italy-P3.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Italy-oog.jpg b/Websites/webkit.org/blog-files/color-gamut/Italy-oog.jpg
new file mode 100644 (file)
index 0000000..4eec7a6
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Italy-oog.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Italy-sRGB.jpg b/Websites/webkit.org/blog-files/color-gamut/Italy-sRGB.jpg
new file mode 100644 (file)
index 0000000..a7fbc56
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Italy-sRGB.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Sunset-AdobeRGB.jpg b/Websites/webkit.org/blog-files/color-gamut/Sunset-AdobeRGB.jpg
new file mode 100644 (file)
index 0000000..bf271a2
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Sunset-AdobeRGB.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Sunset-P3.jpg b/Websites/webkit.org/blog-files/color-gamut/Sunset-P3.jpg
new file mode 100644 (file)
index 0000000..01ed029
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Sunset-P3.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Sunset-oog.jpg b/Websites/webkit.org/blog-files/color-gamut/Sunset-oog.jpg
new file mode 100644 (file)
index 0000000..828ab2a
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Sunset-oog.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/Sunset-sRGB.jpg b/Websites/webkit.org/blog-files/color-gamut/Sunset-sRGB.jpg
new file mode 100644 (file)
index 0000000..f9b40b9
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/Sunset-sRGB.jpg differ
index 867623c..d95b12d 100644 (file)
Binary files a/Websites/webkit.org/blog-files/color-gamut/Webkit-logo-sRGB.png and b/Websites/webkit.org/blog-files/color-gamut/Webkit-logo-sRGB.png differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/YellowFlower-P3.jpg b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-P3.jpg
new file mode 100644 (file)
index 0000000..b7dc9a5
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-P3.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/YellowFlower-oog.jpg b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-oog.jpg
new file mode 100644 (file)
index 0000000..fc7048d
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-oog.jpg differ
diff --git a/Websites/webkit.org/blog-files/color-gamut/YellowFlower-sRGB.jpg b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-sRGB.jpg
new file mode 100644 (file)
index 0000000..c74659e
Binary files /dev/null and b/Websites/webkit.org/blog-files/color-gamut/YellowFlower-sRGB.jpg differ
index 02c5d6b..e64478a 100644 (file)
 <html>
 <head>
   <title>Examples of various wide-gamut images</title>
+  <meta name="viewport" content="width=850">
+  
   <style>
   body {
+      background-color: #888;
       text-align: center;
       font-family: -apple-system;
-      -webkit-text-selection: none;
+      max-width: 800px;
+      margin: 0 auto;
+      font-size: 18px;
   }
 
-  section > h2 {
-      margin: 10px 0;
+  body.white {
+      background-color: white;
+      color: black;
   }
 
-  section > img {
+  body.light-grey {
+      background-color: #bbb;
+      color: black;
+  }
+
+  body.mid-grey {
+      background-color: #888;
+      color: black;
+  }
+
+  body.dark-grey {
+      background-color: #333;
+      color: white;
+  }
+
+  body.black {
+      background-color: black;
+      color: white;
+  }
+
+  p {
+      text-align: justify;
+      line-height: 1.4;
+  }
+
+  button {
+      -webkit-appearance: none;
+      backgroud-color: #539298;
+      color: black;
+      border: 1px solid #333;
+      box-shadow: 0px 1px 0px #336;
+      border-radius: 5px;
+      font-size: 18px;
+      cursor: pointer;
+  }
+
+  button:hover, button:active {
+      background-color: #4d6997;
+  }
+
+  section.photo {
+      border: 2px solid #622;
+      padding: 1em 3em;
+      margin-bottom: 2em;
+  }
+
+  section.photo p {
+      text-align: center;
+  }
+
+  section.photo > h2 {
+      margin: 0 0 0.7em 0;
+      font-size: 200%;
+  }
+
+  section.photo > img {
       margin: 0 auto 15px auto;
       display: block;
   }
 
-  section.shoes > img {
+  section.photo.shoes > img,
+  section.photo.iceland > img,
+  section.photo.italy > img,
+  section.photo.yellow > img,
+  section.photo.flowers > img {
       width: 600px;
       height: 400px;
   }
 
-  section.flowers > img {
-      width: 600px;
-      height: 398px;
-  }
-
-  section.rose > img {
+  section.photo.logo > img,
+  section.photo.rose > img {
       width: 500px;
       height: 500px;
   }
 
-  section > div > div {
+  section.photo.sunset > img {
+      width: 397px;
+      height: 600px;
+  }
+
+  section.photo > div > div {
       display: inline-block;
+      margin: 0 5px;
   }
 
-  section > div > div > img {
+  section.photo > div > div > img {
       margin: 0 auto 10px auto;
       display: block;
+      cursor: pointer;
   }
 
-  section.shoes > div > div > img {
-      width: 200px;
-      height: 133px;
+  section.photo > div > div > img:hover {
+      outline: 2px solid #bbf;
   }
 
-  section.flowers > div > div > img {
+  section.photo.shoes > div > div > img,
+  section.photo.iceland > div > div > img,
+  section.photo.italy > div > div > img,
+  section.photo.yellow > div > div > img,
+  section.photo.flowers > div > div > img {
       width: 200px;
       height: 133px;
   }
 
-  section.rose > div > div > img {
+  section.photo.logo > div > div > img,
+  section.photo.rose > div > div > img {
       width: 150px;
       height: 150px;
   }
 
+  section.photo.sunset > div > div > img {
+      width: 132px;
+      height: 200px;
+  }
 
   </style>
   <script>
 
   function init() {
-      var sections = Array.from(document.querySelectorAll("section"));
+      var buttons = Array.from(document.querySelectorAll(".background button"));
+      buttons.forEach(function (button) {
+          button.addEventListener("click", function (event) {
+              switch (button.textContent) {
+              case "White":
+                  document.body.className = "white";
+                  break;
+              case "Light grey":
+                  document.body.className = "light-grey";
+                  break;
+              case "Middle grey":
+                  document.body.className = "mid-grey";
+                  break;
+              case "Dark grey":
+                  document.body.className = "dark-grey";
+                  break;
+              case "Black":
+                  document.body.className = "black";
+              }
+          });
+      });
+
+      var sections = Array.from(document.querySelectorAll("section.photo"));
       sections.forEach(function (section) {
           var images = Array.from(section.querySelectorAll("div > div > img"));
           images.forEach(function (image) {
   </script>
 </head>
 <body>
+    <h1>Comparision between normal and wide-gamut images</h1>
+
+    <p>
+        Here are some example images to demonstrate wide-gamut. There
+        are multiple versions of each image: one in sRGB, which is the
+        typical color space we've been using on the Web for years, then
+        some in other color spaces with a wider gamut, and then a version
+        where the pixels outside sRGB have been highlighted.
+    </p>
+    <p>
+        You can swap between the versions by tapping the buttons below
+        the image. You can also change the background color of this page:
+    </p>
+    <p class="background">
+        Page background color:
+        <button>White</button>
+        <button>Light grey</button>
+        <button>Middle grey</button>
+        <button>Dark grey</button>
+        <button>Black</button>
+    </p>
+    <p>
+        If you're not using a wide-gamut display to view these images,
+        the different versions should look nearly identical. You'll have
+        to rely on the version that highlights pixels to get an idea of
+        what parts of the image would be different.
+    </p>
 
-    <section class="shoes">
+    <section class="photo shoes">
         <h2>Shoes</h2>
         <img src="Shoes-sRGB.jpg" alt="Bright orange shoes">
         <p>Currently showing: sRGB</p>
         </div>
     </section>
 
-    <section class="flowers">
+    <section class="photo logo">
+        <h2>WebKit Logo</h2>
+        <img src="Webkit-logo-sRGB.png" alt="Red image with very faint WebKit logo">
+        <p>Currently showing: sRGB</p>
+        <p>Tap/click on one of the images below to replace the main image</p>
+        <div>
+            <div>
+                <img src="Webkit-logo-sRGB.png" alt="Faint WebKit logo in the sRGB color space">
+                <span>sRGB</span>
+            </div>
+            <div>
+                <img src="Webkit-logo-P3.png" alt="Faint WebKit logo in the Display P3 color space">
+                <span>Display P3</span>
+            </div>
+            <div>
+                <img src="Webkit-logo-oog.png" alt="Faint WebKit logo showing which parts are outside of the sRGB gamut">
+                <span>Out of sRGB areas</span>
+            </div>
+        </div>
+    </section>
+
+    <section class="photo iceland">
+        <h2>Iceland</h2>
+        <img src="Iceland-sRGB.jpg" alt="A river in Iceland with a sunset">
+        <p>Currently showing: sRGB</p>
+        <p>Tap/click on one of the images below to replace the main image</p>
+        <div>
+            <div>
+                <img src="Iceland-sRGB.jpg" alt="A river in Iceland with a sunset in the sRGB color space">
+                <span>sRGB</span>
+            </div>
+            <div>
+                <img src="Iceland-P3.jpg" alt="A river in Iceland with a sunset in the Display P3 color space">
+                <span>Display P3</span>
+            </div>
+            <div>
+                <img src="Iceland-oog.jpg" alt="A river in Iceland with a sunset showing which parts are outside of the sRGB gamut">
+                <span>Out of sRGB areas</span>
+            </div>
+        </div>
+    </section>
+
+    <section class="photo italy">
+        <h2>Italy</h2>
+        <img src="Italy-sRGB.jpg" alt="Umbrellas in Italy">
+        <p>Currently showing: sRGB</p>
+        <p>Tap/click on one of the images below to replace the main image</p>
+        <div>
+            <div>
+                <img src="Italy-sRGB.jpg" alt="Umbrellas in Italy in the sRGB color space">
+                <span>sRGB</span>
+            </div>
+            <div>
+                <img src="Italy-P3.jpg" alt="Umbrellas in Italy in the Display P3 color space">
+                <span>Display P3</span>
+            </div>
+            <div>
+                <img src="Italy-oog.jpg" alt="Umbrellas in Italy showing which parts are outside of the sRGB gamut">
+                <span>Out of sRGB areas</span>
+            </div>
+        </div>
+    </section>
+
+    <section class="photo flowers">
         <h2>Flowers</h2>
         <img src="Flowers-sRGB.jpg" alt="Lots of red flowers">
         <p>Currently showing: sRGB</p>
                 <span>ProPhoto</span>
             </div>
             <div>
-                <img src="Flowers-AdobeRGB.jpg" alt="Lots of red flowers in the Adobe RGB color space">
-                <span>Adobe RGB</span>
+                <img src="Flowers-oog.jpg" alt="Lots of red flowers showing which parts are outside of the sRGB gamut">
+                <span>Out of sRGB areas</span>
             </div>
+        </div>
+    </section>
+
+    <section class="photo yellow">
+        <h2>Yellow Flower</h2>
+        <img src="YellowFlower-sRGB.jpg" alt="A yellow flowers">
+        <p>Currently showing: sRGB</p>
+        <p>Tap/click on one of the images below to replace the main image</p>
+        <div>
             <div>
-                <img src="Flowers-oog.jpg" alt="Lots of red flowers showing which parts are outside of the sRGB gamut">
+                <img src="YellowFlower-sRGB.jpg" alt="A yellow in the sRGB color space">
+                <span>sRGB</span>
+            </div>
+            <div>
+                <img src="YellowFlower-P3.jpg" alt="A yellow in the Display P3 color space">
+                <span>Display P3</span>
+            </div>
+            <div>
+                <img src="YellowFlower-oog.jpg" alt="A yellow showing which parts are outside of the sRGB gamut">
+                <span>Out of sRGB areas</span>
+            </div>
+        </div>
+    </section>
+
+    <section class="photo sunset">
+        <h2>Sunset</h2>
+        <img src="Sunset-sRGB.jpg" alt="A sunset">
+        <p>Currently showing: sRGB</p>
+        <p>Tap/click on one of the images below to replace the main image</p>
+        <div>
+            <div>
+                <img src="Sunset-sRGB.jpg" alt="A sunset in the sRGB color space">
+                <span>sRGB</span>
+            </div>
+            <div>
+                <img src="Sunset-P3.jpg" alt="A sunset in the P3 color space">
+                <span>Display P3</span>
+            </div>
+            <div>
+                <img src="Sunset-oog.jpg" alt="A sunset showing which parts are outside of the sRGB gamut">
                 <span>Out of sRGB areas</span>
             </div>
         </div>
     </section>
 
-    <section class="rose">
+    <section class="photo rose">
         <h2>Rose</h2>
         <img src="Rose-sRGB.jpg" alt="A red rose">
         <p>Currently showing: sRGB</p>