-
-
Notifications
You must be signed in to change notification settings - Fork 82
Expand file tree
/
Copy pathtest.js
More file actions
132 lines (106 loc) · 6.13 KB
/
test.js
File metadata and controls
132 lines (106 loc) · 6.13 KB
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
import assert from 'node:assert/strict';
import fs from 'node:fs';
import {test} from 'node:test';
import {renderMarkdown} from './utilities.js';
import githubMarkdownCss from './index.js';
fs.mkdirSync('dist', {recursive: true});
fs.writeFileSync('dist/auto.css', await githubMarkdownCss());
const rawThemes = await githubMarkdownCss({list: true});
const themes = rawThemes.split('\n');
await Promise.all(themes.map(async theme => {
fs.writeFileSync(`dist/${theme}.css`, await githubMarkdownCss({light: theme, dark: theme}));
}));
fs.writeFileSync('dist/auto_colorblind.css', await githubMarkdownCss({light: 'light_colorblind', dark: 'dark_colorblind'}));
const fixture = await renderMarkdown();
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>GitHub Markdown CSS demo</title>
<link id="theme" rel="stylesheet" href="auto.css">
<body class="markdown-body">
<article class="markdown-body" style="padding: 1em; max-width: 42em; margin: 0px auto;">
${fixture}
<div class="markdown-alert markdown-alert-note" dir="auto">
<p class="markdown-alert-title" dir="auto"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
<p dir="auto">Highlights information that users should take into account, even when skimming.</p>
</div>
</article>
<select style="position: fixed; top: 1em; right: 1em; font-size: 16px;"
onchange="theme.href=this.value">
<option value="auto.css">auto</option>
<option value="auto_colorblind.css">auto_colorblind</option>
${themes.map(theme => `<option value="${theme}.css">${theme}</option>`).join('\n')}
</select>
</body>
</html>
`;
fs.writeFileSync('dist/index.html', html);
// Demonstrate theme variable files switching with base css
fs.mkdirSync('dist/vars', {recursive: true});
fs.writeFileSync('dist/vars/base.css', await githubMarkdownCss({onlyStyles: true}));
fs.writeFileSync('dist/vars/auto-vars.css', await githubMarkdownCss({onlyVariables: true}));
fs.writeFileSync('dist/vars/auto_colorblind-vars.css', await githubMarkdownCss({light: 'light_colorblind', dark: 'dark_colorblind', onlyVariables: true}));
await Promise.all(themes.map(async theme => {
fs.writeFileSync(`dist/vars/${theme}-vars.css`, await githubMarkdownCss({light: theme, dark: theme, onlyVariables: true}));
}));
const htmlVars = `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<title>GitHub Markdown CSS demo</title>
<link id="base" rel="stylesheet" href="base.css">
<link id="theme" rel="stylesheet" href="auto-vars.css">
<body class="markdown-body">
<article class="markdown-body" style="padding: 1em; max-width: 42em; margin: 0px auto;">
${fixture}
<div class="markdown-alert markdown-alert-note" dir="auto">
<p class="markdown-alert-title" dir="auto"><svg class="octicon octicon-info mr-2" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>Note</p>
<p dir="auto">Highlights information that users should take into account, even when skimming.</p>
</div>
</article>
<select style="position: fixed; top: 1em; right: 1em; font-size: 16px;"
onchange="theme.href=this.value">
<option value="auto-vars.css">auto</option>
<option value="auto_colorblind-vars.css">auto_colorblind</option>
${themes.map(theme => `<option value="${theme}-vars.css">${theme}</option>`).join('\n')}
</select>
</body>
</html>
`;
fs.writeFileSync('dist/vars/index.html', htmlVars);
test('transparentBackground - auto mode', async () => {
const css = await githubMarkdownCss({transparentBackground: true});
assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent in auto mode');
});
test('transparentBackground - single mode inlines transparent', async () => {
const css = await githubMarkdownCss({light: 'light', dark: 'light', transparentBackground: true});
assert.ok(css.includes('background-color: transparent'), 'should inline transparent as background-color');
});
test('transparentBackground - single mode with preserveVariables', async () => {
const css = await githubMarkdownCss({light: 'dark', dark: 'dark', transparentBackground: true, preserveVariables: true});
assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent');
});
test('transparentBackground - onlyVariables', async () => {
const css = await githubMarkdownCss({transparentBackground: true, onlyVariables: true});
assert.ok(css.includes('--bgColor-default: transparent'), 'should set --bgColor-default to transparent');
});
test('link underline styles are included', async () => {
const css = await githubMarkdownCss();
assert.ok(css.includes('.markdown-body a {\n text-decoration: underline;'), 'should include link underline styles');
assert.ok(css.includes('text-underline-offset'), 'should include underline offset');
});
test('link underline styles in onlyStyles mode', async () => {
const css = await githubMarkdownCss({onlyStyles: true});
assert.ok(css.includes('.markdown-body a {\n text-decoration: underline;'), 'should include link underline styles in onlyStyles mode');
});
test('no link underline styles in onlyVariables mode', async () => {
const css = await githubMarkdownCss({onlyVariables: true});
assert.ok(!css.includes('text-underline-offset'), 'should not include link styles in onlyVariables mode');
});
test('no transparentBackground by default', async () => {
const css = await githubMarkdownCss();
assert.ok(!css.includes('--bgColor-default: transparent'), 'should not have transparent background by default');
});