[css-flexbox] Flex item construction may affect sibling flex item height computation
[WebKit-https.git] / Websites / webkit.org / demos / webcrypto / asynchronous-execution.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title>WebCrypto API Demo: Asynchronous Execution</title>
6     <style>
7     .inner
8     {
9         display: inline-block;
10     }
11     .hidden
12     {
13         display: none;
14     }
15     .loader {
16         border: 4px solid #f3f3f3; /* Light grey */
17         border-top: 4px solid #3498db; /* Blue */
18         border-radius: 50%;
19         width: 8px;
20         height: 8px;
21         animation: spin 2s linear infinite;
22         display: inline-block;
23     }
24     @keyframes spin {
25         0% { transform: rotate(0deg); }
26         100% { transform: rotate(360deg); }
27     }
28     </style>
29     <script type="text/javascript" src="common.js"></script>
30     <script type="text/javascript">
31     var plainText = new Uint8Array(104857600); // 100MB
32     var keyData = hexStringToUint8Array("2b7e151628aed2a6abf7158809cf4f3c2b7e151628aed2a6abf7158809cf4f3c");
33     var iv = hexStringToUint8Array("000102030405060708090a0b0c0d0e0f");
34     var times = 10;
35     function webkitAES_CBC()
36     {
37         document.getElementById("webkitAES_CBC").classList.add("hidden");
38         document.getElementById("webkitAES_CBC_loader").classList.remove("hidden");
39         document.getElementById("webkitAES_CBC_loader").classList.add("loader");
40         crypto.webkitSubtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
41             var array = [ ];
42             for (var i = 0; i < times; i++)
43                 array.push(crypto.webkitSubtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
44             Promise.all(array).then(function() {
45                 document.getElementById("webkitAES_CBC").classList.remove("hidden");
46                 document.getElementById("webkitAES_CBC_loader").classList.remove("loader");
47                 document.getElementById("webkitAES_CBC_loader").classList.add("hidden");
48             }, failAndLog);
49         }, failAndLog);
50     }
51     function AES_CBC()
52     {
53         document.getElementById("AES_CBC").classList.add("hidden");
54         document.getElementById("AES_CBC_loader").classList.remove("hidden");
55         document.getElementById("AES_CBC_loader").classList.add("loader");
56         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
57             var array = [ ];
58             for (var i = 0; i < times; i++)
59                 array.push(crypto.subtle.encrypt({name: "aes-cbc", iv: iv}, key, plainText));
60             Promise.all(array).then(function() {
61                 document.getElementById("AES_CBC").classList.remove("hidden");
62                 document.getElementById("AES_CBC_loader").classList.remove("loader");
63                 document.getElementById("AES_CBC_loader").classList.add("hidden");
64             }, failAndLog);
65         }, failAndLog);
66     }
67     function worker()
68     {
69         document.getElementById("worker").classList.add("hidden");
70         document.getElementById("worker_loader").classList.remove("hidden");
71         document.getElementById("worker_loader").classList.add("loader");
72         crypto.subtle.importKey("raw", keyData, "aes-cbc", false, ["encrypt"]).then(function(key) {
73             var worker = new Worker("asynchronous-execution-worker.js");
74             worker.onmessage = function(result) {
75                 document.getElementById("worker").classList.remove("hidden");
76                 document.getElementById("worker_loader").classList.remove("loader");
77                 document.getElementById("worker_loader").classList.add("hidden");
78             }
79             worker.postMessage(key);
80         }, failAndLog);
81     }
82     </script>
83 </head>
84 <body>
85     <div>
86         <h1>Asynchronous executions</h1>
87         <p>
88             Click the following buttons to see how asynchronous executions could help to improve responsiveness of a website.
89             To magnify the effect, a very large file <b>~100MB</b> will be encrypted <b>TEN</b> times. Be aware of your hardware limits.
90         </p>
91         <div>
92             <p>WebKitSubtleCrypto:</p>
93             <button type="button" onclick="webkitAES_CBC()" class="inner">AES-CBC Encryption</button>
94             <div id="webkitAES_CBC_loader" class="hidden"></div>
95             <div id="webkitAES_CBC" class="inner hidden">Done!</div>
96         </div>
97         <div>
98             <p>SubtleCrypto:</p>
99             <button type="button" onclick="AES_CBC()" class="inner">AES-CBC Encryption</button>
100             <div id="AES_CBC_loader" class="hidden"></div>
101             <div id="AES_CBC" class="inner hidden">Done!</div>
102         </div>
103         <div>
104             <p>WebWorkers:</p>
105             <button type="button" onclick="worker()" class="inner">AES-CBC Encryption</button>
106             <div id="worker_loader" class="hidden"></div>
107             <div id="worker" class="inner hidden">Done!</div>
108         </div>
109     </div>
110 </body>
111 </html>