Replace reftest scripts-height.html with script tests
[WebKit-https.git] / Websites / webkit.org / experimental-features.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Experimental features</title>
5 <meta name="viewport" content="width=600">
6 <style>
7 body {
8     background-color: #AEBDB4;
9     margin: 0;
10     font-family: -apple-system, sans-serif;
11     font-size: 22px;
12 }
13
14 .content {
15     width: 480px;
16     margin: 30px auto;
17     background-color: #D2D2D2;
18     border: 1px solid black;
19     border-top-width: 5px;
20     text-align: center;
21 }
22
23 .content h1 {
24     font-size: 34px;
25     margin: 20px 0;
26 }
27
28 .content p {
29     margin: 10px 40px;
30 }
31
32 .content .test {
33     display: flex;
34     justify-content: center;
35     align-items: center;
36     font-size: 22px;
37     width: 320px;
38     margin: 25px auto;
39     height: 70px;
40     padding: 0 55px;
41     background-color: #e7dd0e;
42     border: 2px solid #999309;
43     border-radius: 35px;
44     background-size: 40px 40px;
45     background-position: 15px 15px;
46     background-repeat: no-repeat;
47     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>');
48 }
49
50 .content .test p {
51     margin: 0;
52     padding: 0;
53 }
54
55 .content .test.enabled {
56     background-color: #1fee06;
57     border-color: #00aa04;
58     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>');
59 }
60
61 .content .test.disabled {
62     background-color: #fb5207;
63     border-color: #ab3903;
64     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>');
65 }
66
67 </style>
68 <script type="module">
69 window.es6modules = true;
70 </script>
71 <script>
72 function testLinkPreload() {
73     var link = document.createElement("link");
74     return link.relList.supports("preload");
75 }
76
77 function testSpringAnimation() {
78     return CSS.supports("transition-timing-function", "spring(1 100 10 0)");
79 }
80
81 function testVariationFonts() {
82     return CSS.supports("font-variation-settings", '"XHGT" 0.7');
83 }
84
85 function testES6Modules() {
86     return window.es6modules;
87 }
88
89 function testSubtleCrypto() {
90     return window.crypto.subtle;
91 }
92
93 function testWebAnimations() {
94     return !!window.Animation;
95 }
96
97 function testWebAnimationsCSSIntegration() {
98     return !!window.CSSAnimation;
99 }
100
101 function testWebGL2() {
102     let canvas = document.createElement("canvas");
103     return canvas.getContext("webgl2");
104 }
105
106 function testWebGPU() {
107     return window.gpu;
108 }
109
110 function testWebMetal() {
111     return window.WebMetalRenderingContext;
112 }
113
114 function testWebRTC() {
115     return window.RTCPeerConnection;
116 }
117
118 function testObjectRest() {
119     try {
120         eval(`function foo() { let {x, ...rest} = 20; ;({...foo} = 20); };`);
121     } catch (e) {
122         return false;
123     }
124     return true;
125 }
126
127 function testImageBitmapOffscreenCanvas() {
128     return 'createImageBitmap' in window && 'OffscreenCanvas' in window;
129 }
130 window.addEventListener("load", function () {
131     Array.from(document.querySelectorAll(".test")).forEach(element => {
132         var enabled = false;
133         try {
134             var testFunction = window[`test${element.id}`];
135             enabled = !!testFunction();
136         } catch (e) {
137             console.error(e);
138         }
139         element.classList.add(enabled ? "enabled" : "disabled");
140     });
141 }, false);
142 </script>
143 </head>
144 <body>
145     <div class="content">
146         <h1>Experimental Feature Availability</h1>
147         <p>Toggle experimental features via the Develop menu (requires reload to take effect).</p>
148         <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>
149
150         <div class="test" id="SpringAnimation"><p>CSS Spring Animations</p></div>
151         <div class="test" id="ES6Modules"><p>ES6 Modules in HTML</p></div>
152         <div class="test" id="ImageBitmapOffscreenCanvas"><p>ImageBitmap and OffscreenCanvas</p></div>
153         <div class="test" id="LinkPreload"><p>Link Preload</p></div>
154         <div class="test" id="SubtleCrypto"><p>SubtleCrypto</p></div>
155         <div class="test" id="VariationFonts"><p>Variation Fonts</p></div>
156         <div class="test" id="WebAnimations"><p>Web Animations</p></div>
157         <div class="test" id="WebAnimationsCSSIntegration"><p>Web Animations and CSS Integration</p></div>
158         <div class="test" id="WebGL2"><p>WebGL 2.0</p></div>
159         <div class="test" id="WebGPU"><p>Web GPU</p></div>
160         <div class="test" id="WebMetal"><p>WebMetal</p></div>
161         <div class="test" id="WebRTC"><p>WebRTC</p></div>
162         <div class="test" id="ObjectRest"><p>ObjectRest</p></div>
163     </div>
164 </body>
165 </html>