<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[202600] trunk/Websites/webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/202600">202600</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2016-06-28 18:37:53 -0700 (Tue, 28 Jun 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add a more interactive version of the demo.
* blog-files/color-gamut/comparison.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsiteswebkitorgChangeLog">trunk/Websites/webkit.org/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkWebsiteswebkitorgblogfilescolorgamutcomparisonhtml">trunk/Websites/webkit.org/blog-files/color-gamut/comparison.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsiteswebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/webkit.org/ChangeLog (202599 => 202600)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/ChangeLog 2016-06-29 01:04:05 UTC (rev 202599)
+++ trunk/Websites/webkit.org/ChangeLog 2016-06-29 01:37:53 UTC (rev 202600)
</span><span class="lines">@@ -1,3 +1,9 @@
</span><ins>+2016-06-28 Dean Jackson <dino@apple.com>
+
+ Add a more interactive version of the demo.
+
+ * blog-files/color-gamut/comparison.html: Added.
+
</ins><span class="cx"> 2016-06-28 Jon Davis <jond@apple.com>
</span><span class="cx">
</span><span class="cx"> Fixed tile height for mobile phone-sized viewports.
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgblogfilescolorgamutcomparisonhtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/blog-files/color-gamut/comparison.html (0 => 202600)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/blog-files/color-gamut/comparison.html (rev 0)
+++ trunk/Websites/webkit.org/blog-files/color-gamut/comparison.html 2016-06-29 01:37:53 UTC (rev 202600)
</span><span class="lines">@@ -0,0 +1,232 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>Interactive Wide-Gamut Comparisons</title>
+<style>
+
+body {
+ background-color: #888;
+ text-align: center;
+ font-family: -apple-system, sans-serif;
+ max-width: 800px;
+ margin: 0 auto;
+ font-size: 18px;
+}
+
+* {
+ -webkit-user-select: none;
+}
+
+.comparison {
+ margin: 0 auto 40px auto;
+ position: relative;
+ width: 600px;
+ height: 400px;
+}
+
+.comparison img {
+ -webkit-user-drag: none;
+ -webkit-user-select: none;
+}
+
+.comparison .a, .comparison .b {
+ position: absolute;
+ top: 0;
+ height: 400px;
+}
+
+.comparison .a {
+ left: 0;
+ width: 300px;
+}
+
+.comparison .b {
+ right: 0;
+ width: 300px;
+ overflow: hidden;
+}
+
+.comparison .a span,
+.comparison .b span {
+ display: block;
+ position: absolute;
+ color: white;
+ border: 1px solid white;
+ padding: 2px;
+ border-radius: 4px;
+ background-color: rgba(0, 0, 0, 0.75);
+ top: 10px;
+ left: 10px;
+}
+
+.comparison .b span {
+ left: auto;
+ right: 10px;
+}
+
+.comparison .b img {
+ position: absolute;
+ right: 0;
+}
+
+.comparison .divider {
+ position: absolute;
+ top: 0;
+ left: 300px;
+ height: 100%;
+ margin-left: -2px;
+ width: 4px;
+ background-color: #444;
+}
+
+</style>
+<script>
+
+var IMAGES = [
+ { name: "Webkit-logo", wide: "P3", type: "png", alt: "A red square with the WebKit logo embossed", width: 500, height: 500 },
+ { name: "Iceland", wide: "P3", type: "jpg", alt: "A river in Iceland", divider: "white" },
+ { name: "Shoes", wide: "AdobeRGB", type: "jpg", alt: "Hober's bright orange shoes", divider: "white" },
+ { name: "YellowFlower", wide: "P3", type: "jpg", alt: "A bright yellow flower" },
+ { name: "Italy", wide: "P3", type: "jpg", alt: "Some umbrellas in Italy", divider: "white" },
+ { name: "Flowers", wide: "ProPhoto", type: "jpg", alt: "Red flowers", width: 600, height: 396 },
+ { name: "Rose", wide: "ProPhoto", type: "jpg", alt: "A red rose", width: 500, height: 500 },
+ { name: "Sunset", wide: "P3", type: "jpg", alt: "A sunset", divider: "white", width: 397, height: 600 },
+]
+
+window.addEventListener("load", init, false);
+
+function init()
+{
+ IMAGES.forEach(function(image) {
+ var comparison = document.createElement("div");
+ comparison.className = "comparison";
+ comparison.addEventListener("mousedown", startDrag, false);
+ comparison.addEventListener("touchstart", startDrag, false);
+ var a = document.createElement("div");
+ a.className = "a";
+ var imgA = document.createElement("img");
+ imgA.src = image.name + "-sRGB." + image.type;
+ imgA.alt = image.alt + ". Image is in the sRGB color space";
+ a.appendChild(imgA);
+ var description = document.createElement("span");
+ description.textContent = "sRGB";
+ a.appendChild(description);
+ comparison.appendChild(a);
+ var b = document.createElement("div");
+ b.className = "b";
+ var imgB = document.createElement("img");
+ imgB.src = image.name + "-" + image.wide + "." + image.type;
+ imgB.alt = image.alt + ". Image is in the " + image.wide + " color space";
+ b.appendChild(imgB);
+ description = document.createElement("span");
+ description.textContent = image.wide;
+ b.appendChild(description);
+ comparison.appendChild(b);
+ var divider = document.createElement("div");
+ divider.className = "divider";
+ if (image.divider)
+ divider.style.backgroundColor = image.divider;
+ comparison.appendChild(divider);
+ document.body.appendChild(comparison);
+
+ if (image.width) {
+ // Non-standard width and height.
+ comparison.style.width = image.width + "px";
+ comparison.style.height = image.height + "px";
+ a.style.height = image.height + "px";
+ a.style.width = (image.width / 2) + "px";
+ b.style.height = image.height + "px";
+ b.style.width = (image.width / 2) + "px";
+ divider.style.left = (image.width / 2) + "px";
+ imgA.width = image.width;
+ imgA.height = image.height;
+ imgB.width = image.width;
+ imgB.height = image.height;
+ }
+ });
+}
+
+var dragTarget = null;
+
+function startDrag(event)
+{
+ if (event.touches && event.touches.length > 1) {
+ event.preventDefault();
+ return;
+ }
+
+ dragTarget = event.currentTarget;
+
+ document.addEventListener("mousemove", dragged, false);
+ document.addEventListener("mouseup", endDrag, false);
+ document.addEventListener("touchmove", dragged, false);
+ document.addEventListener("touchend", endDrag, false);
+ document.addEventListener("touchcancel", endDrag, false);
+
+ var x = event.clientX;
+ if (event.touches && event.touches.length > 0)
+ x = event.touches[0].clientX;
+
+ updateComparisonPoint(dragTarget, x);
+}
+
+function dragged(event)
+{
+ if (!dragTarget)
+ return;
+
+ if (event.touches && event.touches.length > 1)
+ return;
+
+ var x = event.clientX;
+ if (event.touches && event.touches.length > 0)
+ x = event.touches[0].clientX;
+
+ updateComparisonPoint(dragTarget, x);
+}
+
+function endDrag(event)
+{
+ if (!dragTarget)
+ return;
+
+ if (event.touches && event.touches.length > 1)
+ return;
+
+ document.removeEventListener("mousemove", dragged);
+ document.removeEventListener("mouseup", endDrag);
+ document.removeEventListener("touchmove", dragged);
+ document.removeEventListener("touchend", endDrag);
+ document.removeEventListener("touchcancel", endDrag);
+}
+
+function updateComparisonPoint(comparison, clientX)
+{
+ var bounds = comparison.getBoundingClientRect();
+ var offset = clientX - bounds.left;
+
+ offset = Math.min(bounds.width, Math.max(0, offset));
+
+ var imageAContainer = comparison.querySelector(".a");
+ var imageBContainer = comparison.querySelector(".b");
+
+ imageAContainer.style.width = offset + "px";
+ imageBContainer.style.width = (bounds.width - offset) + "px";
+
+ var divider = comparison.querySelector(".divider");
+ divider.style.left = offset + "px";
+}
+
+</script>
+<body>
+ <h1>Interactive Image Comparison</h1>
+ <p>
+ Touch and drag on the images to move between the sRGB version (left)
+ and the wide-gamut version (right).
+ </p>
+ <p>
+ Note that if you don't have a wide-gamut display, you might
+ not notice any difference. The <a href=".">less interactive version</a>
+ has an option to show the out-of-gamut pixels.
+ </p>
+</body>
</ins><span class="cx">\ No newline at end of file
</span><span class="cx">Property changes on: trunk/Websites/webkit.org/blog-files/color-gamut/comparison.html
</span><span class="cx">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4>Added: svn:eol-style</h4></div>
<ins>+native
</ins><span class="cx">\ No newline at end of property
</span><a id="svnkeywords"></a>
<div class="addfile"><h4>Added: svn:keywords</h4></div>
<ins>+Date Revision
</ins><span class="cx">\ No newline at end of property
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<ins>+text/html
</ins><span class="cx">\ No newline at end of property
</span></div>
</body>
</html>