-
Notifications
You must be signed in to change notification settings - Fork 2
/
ter.html
80 lines (80 loc) 路 4.18 KB
/
ter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<meta charset="utf-8">
<link rel="icon" href="data:,">
<style>
/* Prism - Raw theme */
pre { overflow: auto;margin: .5em 0;padding: 1em; }
pre, code[class*="language-"] { color: #ccc;background: #111;border-radius: .3em;font: 400 1em/1.5 Menlo, monospace;white-space: pre;tab-size: 2;hyphens: none; }
:not(pre) > code[class*="language-"] { padding: .1em; }
.token.comment { color: #555; }
.token.class-name { color: #fd0; }
.token.keyword { color: #f6e; }
.token.property-access { color: #f34; }
.token.boolean, .token.number { color: #fa3; }
.token.string, .token.regex { color: #7d0; }
.token.function, .token.method { color: #39f; }
.token.operator { color: #3df; }
[id] { cursor: pointer; }
[id]:hover { background: linear-gradient(to right,#03f,#0bf);-webkit-background-clip: text;-webkit-text-fill-color: transparent; }
</style>
<style>
* { outline: inherit;font: inherit;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: transparent;-webkit-text-size-adjust: 100%;box-sizing: border-box;caret-color: var(--primary); }
body { margin: 80px;color: white;background: #2f3138;font-family: sans-serif;font-size: 18px; }
h1 { display: flex;align-items: center;justify-content: space-between;color: #afafaf;font-size: 22px;font-weight: 300;text-transform: uppercase;letter-spacing: 0.1em; }
button { opacity: 0.8;padding: 5px 10px;color: #fa3;background: none;border: 1px solid #fa3;border-radius: 4px;font-size: 18px;text-transform: uppercase; }
button:hover { opacity: 1; }
pre { margin: 0;padding: 0;background: none;padding: 10px;white-space: normal; }
.editor { margin-top: 20px;padding: 20px;color: white;background: #2a2b2f;border: 2px solid rgb(0, 0, 0, .2);border-radius: 10px;transition: .5s; }
.success .editor { border-color: rgb(119, 221, 0, .4); }
.warning .editor { border-color: rgb(255, 170, 51, .4); }
.error .editor { border-color: rgb(255, 51, 68, .4); }
.error .console { color: #f34; }
.editor .wrapper { position: relative;overflow: hidden;width: 100%;font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New";line-height: 27px; }
.editor .wrapper textarea { position: absolute;top: 0px;left: 0px;overflow: hidden;width: 100%;height: 100%;padding: 0;color: inherit;background: none;border: none;outline: none;white-space: pre-wrap;-webkit-font-smoothing: antialiased;-webkit-text-fill-color: transparent;resize: none; }
.editor .wrapper pre { position: relative;pointer-events: none;margin: 0px;padding: 0;background: none;border: 0px;white-space: pre-wrap; }
</style>
<main>
<h1>{{ location.search.slice(1) || 'test-suite.js' }}</h1>
<testarea :value="test" @input="Vue.set(tests, i, $event)" v-for="test, i in tests"></testarea>
</main>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/prismjs@1.16.0/prism.js"></script>
<script src="https://unpkg.com/prismjs@1.16.0/components/prism-markdown.js"></script>
<script src="https://unpkg.com/prismjs@1.16.0/components/prism-js-extras.js"></script>
<script>
Vue.component('testarea', {
props: ['value'],
template: `<div class="testarea" :class="run.test ? run.error ? run.error.name !== 'AssertionError' ? 'error' : 'warning' : 'success' : ''">
<div class="editor">
<div class="wrapper">
<textarea spellcheck="false" :value="value" @input="$emit('input', $event.target.value)"></textarea>
<pre v-html="Prism.highlight(value || '', Prism.languages.js, 'js')"></pre>
</div>
</div>
<pre class="console" v-html="run.error"></pre>
</div>`,
data() {
return {
run: {},
}
},
created() {
let run = 0
this.$watch('value', async () => {
this.run = {}
if (!this.value) return
const r = ++run
const result = await run_test(this.value, $root.tests[0])
if (r === run) this.run = result
}, { immediate: true })
},
})
window.$root = new Vue({
el: 'main',
data() {
import('./ter.js').then(() => download_suite(location.search.slice(1) || 'test-suite.js')).then(r => run_test(r[0]).then(() => this.tests = r))
return {
tests: [],
}
},
})
</script>