<!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>[209287] 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/209287">209287</a></dd>
<dt>Author</dt> <dd>dino@apple.com</dd>
<dt>Date</dt> <dd>2016-12-02 17:20:48 -0800 (Fri, 02 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Make a public facing page to check for WebKit features
https://bugs.webkit.org/show_bug.cgi?id=165331
<rdar://problem/29488535>
Reviewed by Antoine Quint.
Add a web page to webkit.org that allows us to live
detect our experimental features. This is mostly for
internal debugging, but also provides simple examples
of how real content would do such detection.
* experimental-features.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="#trunkWebsiteswebkitorgexperimentalfeatureshtml">trunk/Websites/webkit.org/experimental-features.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 (209286 => 209287)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/ChangeLog 2016-12-03 01:09:21 UTC (rev 209286)
+++ trunk/Websites/webkit.org/ChangeLog 2016-12-03 01:20:48 UTC (rev 209287)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2016-12-02 Dean Jackson <dino@apple.com>
+
+ Make a public facing page to check for WebKit features
+ https://bugs.webkit.org/show_bug.cgi?id=165331
+ <rdar://problem/29488535>
+
+ Reviewed by Antoine Quint.
+
+ Add a web page to webkit.org that allows us to live
+ detect our experimental features. This is mostly for
+ internal debugging, but also provides simple examples
+ of how real content would do such detection.
+
+ * experimental-features.html: Added.
+
</ins><span class="cx"> 2016-11-17 Keith Miller <keith_miller@apple.com>
</span><span class="cx">
</span><span class="cx"> Add rotate to Wasm
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgexperimentalfeatureshtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/experimental-features.html (0 => 209287)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/experimental-features.html (rev 0)
+++ trunk/Websites/webkit.org/experimental-features.html 2016-12-03 01:20:48 UTC (rev 209287)
</span><span class="lines">@@ -0,0 +1,138 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+<title>Experimental features</title>
+<meta name="viewport" content="width=600">
+<style>
+body {
+ background-color: #AEBDB4;
+ margin: 0;
+ font-family: -apple-system, sans-serif;
+ font-size: 22px;
+}
+
+.content {
+ width: 480px;
+ margin: 30px auto;
+ background-color: #D2D2D2;
+ border: 1px solid black;
+ border-top-width: 5px;
+ text-align: center;
+}
+
+.content h1 {
+ font-size: 34px;
+ margin: 20px 0;
+}
+
+.content p {
+ margin: 10px 40px;
+}
+
+.content .test {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 22px;
+ width: 320px;
+ margin: 25px auto;
+ height: 70px;
+ padding: 0 55px;
+ background-color: #e7dd0e;
+ border: 2px solid #999309;
+ border-radius: 35px;
+ background-size: 40px 40px;
+ background-position: 15px 15px;
+ background-repeat: no-repeat;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><circle cx="22.5" cy="22.5" r="22.5" fill="#999309"/><path fill="#e7dd0e" d="M14.58,17.93a7.54,7.54,0,0,1,1.27-4,9.79,9.79,0,0,1,3.71-3.37,11.67,11.67,0,0,1,5.69-1.33,12.15,12.15,0,0,1,5.34,1.12,8.65,8.65,0,0,1,3.58,3,7.44,7.44,0,0,1,1.26,4.17,6.45,6.45,0,0,1-.72,3.11A9.51,9.51,0,0,1,33,22.95q-1,1-3.55,3.26a14.47,14.47,0,0,0-1.14,1.14,4.62,4.62,0,0,0-.64.9,4.4,4.4,0,0,0-.32.81q-.11.41-.34,1.43a2.32,2.32,0,0,1-2.48,2.17,2.54,2.54,0,0,1-1.82-.71A2.78,2.78,0,0,1,22,29.84a7.39,7.39,0,0,1,2-5.28,33,33,0,0,1,2.42-2.3q1.33-1.17,1.93-1.76a6,6,0,0,0,1-1.32,3.2,3.2,0,0,0,.41-1.58,3.68,3.68,0,0,0-1.24-2.81,4.53,4.53,0,0,0-3.2-1.15,4.43,4.43,0,0,0-3.38,1.16A9.23,9.23,0,0,0,20,18.18q-.71,2.36-2.69,2.36a2.64,2.64,0,0,1-2-.82A2.52,2.52,0,0,1,14.58,17.93ZM24.75,40.78A3.28,3.28,0,0,1,22.53,40a2.89,2
.89,0,0,1-.95-2.3,3,3,0,0,1,.92-2.21,3.1,3.1,0,0,1,2.25-.9,3.06,3.06,0,0,1,3.11,3.11,2.91,2.91,0,0,1-.94,2.29A3.17,3.17,0,0,1,24.75,40.78Z" transform="translate(-2.5 -2.5)"/></svg>');
+}
+
+.content .test p {
+ margin: 0;
+ padding: 0;
+}
+
+.content .test.enabled {
+ background-color: #1fee06;
+ border-color: #00aa04;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><circle cx="22.5" cy="22.5" r="22.5" fill="#00aa04"/><polyline points="36.13 11.93 16.99 31.07 8.87 22.95" style="fill:none;stroke:#1fee06;stroke-width:7px"/></svg>');
+}
+
+.content .test.disabled {
+ background-color: #fb5207;
+ border-color: #ab3903;
+ background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45"><circle cx="22.5" cy="22.5" r="22.5" fill="#ab3903"/><path d="M34.57,15.43,15.43,34.57" transform="translate(-2.5 -2.5)" style="fill:none;stroke:#fb5207;stroke-width:7px"/><path d="M15.43,15.43,34.57,34.57" transform="translate(-2.5 -2.5)" style="fill:none;stroke:#fb5207;stroke-width:7px"/></svg>');
+}
+
+</style>
+<script type="module">
+window.es6modules = true;
+</script>
+<script>
+
+function testCSSGrid() {
+ return CSS.supports("display", "grid");
+}
+
+function testWebGL2() {
+ let canvas = document.createElement("canvas");
+ return canvas.getContext("webgl2");
+}
+
+function testGamepad() {
+ return navigator.getGamepads;
+}
+
+function testSpringAnimation() {
+ return CSS.supports("transition-timing-function", "spring(1 100 10 0)");
+}
+
+function testVariationFonts() {
+ return CSS.supports("font-variation-settings", '"XHGT" 0.7');
+}
+
+function testFormValidation() {
+ return "reportValidity" in HTMLInputElement.prototype;
+}
+
+function testInputEvents() {
+ return window.InputEvent;
+}
+
+function testPointerLock() {
+ return "exitPointerLock" in Document.prototype;
+}
+
+function testES6Modules() {
+ return window.es6modules;
+}
+
+window.addEventListener("load", function () {
+ Array.from(document.querySelectorAll(".test")).forEach(element => {
+ var testFunction = window[`test${element.id}`];
+ if (typeof testFunction === "function")
+ element.classList.add(testFunction() ? "enabled" : "disabled");
+ });
+}, false);
+
+ </script>
+</head>
+<body>
+ <div class="content">
+ <h1>Experimental Feature Availability</h1>
+ <p>Toggle experimental features via the Develop menu (requires reload to take effect).</p>
+ <p>These tests do not exercise actual functionality. They are just the most basic check to see if the feature claims to be available.</p>
+
+ <div class="test" id="CSSGrid"><p>CSS Grid</p></div>
+ <div class="test" id="Gamepad"><p>Gamepad API</p></div>
+ <div class="test" id="VariationFonts"><p>Variation Fonts</p></div>
+ <!-- Remove "-unknown" when WebKit can do live feature detection for pointer lock -->
+ <div class="test" id="PointerLock-unknown"><p>Mouse Pointer Lock</p></div>
+ <div class="test" id="WebGL2"><p>WebGL 2.0</p></div>
+ <div class="test" id="FormValidation"><p>HTML Form Validation</p></div>
+ <div class="test" id="InputEvents"><p>HTML Input Events</p></div>
+ <div class="test" id="SpringAnimation"><p>CSS Spring Animations</p></div>
+ <div class="test" id="ES6Modules"><p>ES6 Modules in HTML</p></div>
+ </div>
+</body>
+</html>
</ins><span class="cx">Property changes on: trunk/Websites/webkit.org/experimental-features.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>