Skip to content

Commit 6dcbedd

Browse files
aboseabose
committed
css tests
1 parent b2ea643 commit 6dcbedd

File tree

4 files changed

+247
-7
lines changed

4 files changed

+247
-7
lines changed

‎test/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
</script>
2323

2424
<script src="testInit.js"></script>
25-
<script src="test.worker.js"></script>
25+
<script src="test-css.worker.js"></script>
2626
</head>
2727
<body onload="mocha.run()">
2828
<div id="mocha"></div>

test/test.worker.js renamed to test/test-css.worker.js

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ describe(`web worker CSS Language tests`, function () {
2424
return new Promise((resolve)=>{
2525
let interVal;
2626
function checkMessage() {
27-
if(messageFromWorker === message){
28-
resolve(true);
27+
if(messageFromWorker && messageFromWorker.type === message){
28+
resolve(messageFromWorker);
2929
clearInterval(interVal);
3030
}
3131
let elapsedTime = Date.now() - startTime;
3232
if(elapsedTime > timeoutMs){
33-
resolve(false);
33+
resolve(null);
3434
clearInterval(interVal);
3535
}
3636
}
@@ -41,7 +41,18 @@ describe(`web worker CSS Language tests`, function () {
4141
it(`Should load CSS Language Service in worker`, async function () {
4242
messageFromWorker = null;
4343
worker.postMessage({command: `workerOK`});
44-
let status = await waitForWorkerMessage(`worker.ok`, 1000);
45-
expect(status).to.be.true;
44+
let output = await waitForWorkerMessage(`worker.ok`, 1000);
45+
expect(output).to.be.not.null;
46+
});
47+
48+
it(`Should getAllSymbols get all css symbols`, async function () {
49+
messageFromWorker = null;
50+
const text = await (await fetch("test-files/a.css")).text();
51+
worker.postMessage({command: `getAllSymbols`, text, cssMode: "CSS", filePath: "file:///a.css"});
52+
let output = await waitForWorkerMessage(`getAllSymbols`, 1000);
53+
const symbols = output.symbols;
54+
expect(symbols.length).to.eql(29);
55+
expect(symbols.includes(".testClass")).to.be.true;
56+
expect(symbols.includes("@keyframes shooting")).to.be.true;
4657
});
4758
});

‎test/test-files/a.css‎

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
body {
2+
background: #000a2e;
3+
overflow: hidden;
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
font-family: "Montserrat";
8+
}
9+
10+
img {
11+
vertical-align: middle;
12+
border-style: none;
13+
}
14+
15+
.testClass {
16+
background: rgb(38, 28, 207);
17+
background: linear-gradient(207deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
18+
background-image: linear-gradient(green, white);
19+
20+
}
21+
22+
#starsLeft {
23+
position: absolute;
24+
left: 0px;
25+
top: 5%;
26+
opacity: 0.7;
27+
z-index: 2;
28+
}
29+
30+
#starsRight {
31+
position: absolute;
32+
z-index: 2;
33+
right: 0px;
34+
top: 5%;
35+
opacity: 0.7;
36+
}
37+
38+
#mainDiv {
39+
color: #ffffffef;
40+
top: 35%;
41+
left: 50%;
42+
transform: translate(-50%, -50%);
43+
position: absolute;
44+
z-index: 8;
45+
align-items: center;
46+
justify-content: center;
47+
display: flex !important;
48+
flex-direction: column !important;
49+
}
50+
51+
#logo {
52+
height: 35vh;
53+
vertical-align: middle;
54+
border-style: none;
55+
box-sizing: border-box;
56+
}
57+
@media screen and (max-width: 720px) {
58+
#mainDiv {
59+
color: #ffffffef;
60+
top: 40%;
61+
left: 50%;
62+
transform: translate(-50%, -50%);
63+
position: absolute;
64+
z-index: 8;
65+
align-items: center;
66+
justify-content: center;
67+
display: flex !important;
68+
flex-direction: column !important;
69+
}
70+
71+
#logo {
72+
height: 125px;
73+
vertical-align: middle;
74+
position: relative;
75+
}
76+
}
77+
#MainText {
78+
color: #ffffffef;
79+
text-align: center !important;
80+
}
81+
82+
h1 {
83+
font-size: 2.25rem;
84+
font-weight: 500;
85+
line-height: 1.2;
86+
margin-top: 0;
87+
}
88+
89+
@keyframes Animation {
90+
0% {
91+
background-position: 0% 0%;
92+
}
93+
50% {
94+
background-position: 100% 0%;
95+
}
96+
100% {
97+
background-position: 0% 0%;
98+
}
99+
}
100+
101+
.clouds {
102+
position: absolute;
103+
bottom: 0;
104+
width: 99%;
105+
}
106+
107+
#cloudLeftTop {
108+
position: absolute;
109+
top: -10%;
110+
left: -20px;
111+
z-index: 1;
112+
}
113+
114+
#cloudBottomRight {
115+
position: absolute;
116+
bottom: 10%;
117+
right: -20px;
118+
z-index: 1;
119+
}
120+
121+
.night {
122+
position: relative;
123+
width: 100%;
124+
height: 100%;
125+
transform: rotateZ(45deg);
126+
}
127+
128+
.shooting_star {
129+
position: absolute;
130+
left: 50%;
131+
top: 50%;
132+
width: 100px;
133+
height: 1px;
134+
background: linear-gradient(
135+
-45deg,
136+
rgba(95, 145, 255, 1),
137+
rgba(0, 0, 255, 0)
138+
);
139+
border-radius: 999px;
140+
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
141+
animation: tail 3000ms ease-in-out, shooting 3000ms ease-in-out;
142+
animation-fill-mode: forwards;
143+
}
144+
145+
@keyframes tail {
146+
0% {
147+
width: 0;
148+
}
149+
150+
30% {
151+
width: 100px;
152+
}
153+
154+
100% {
155+
width: 0;
156+
}
157+
}
158+
159+
@keyframes shooting {
160+
0% {
161+
transform: translateX(0);
162+
}
163+
164+
100% {
165+
transform: translateX(300px);
166+
}
167+
}
168+
169+
/* Additionnal styles */
170+
.video-slider {
171+
width: 100%;
172+
height: 15em;
173+
position: relative;
174+
overflow: hidden;
175+
}
176+
.slide {
177+
position: absolute;
178+
top: 0;
179+
left: 100%;
180+
height: 100%;
181+
width: 100%;
182+
text-align: center;
183+
overflow: hidden;
184+
}
185+
.slide:first-child {
186+
left: 0;
187+
}
188+
.video {
189+
height: 100%;
190+
width: 100%;
191+
border: 0;
192+
}
193+
.slide-arrow {
194+
position: absolute;
195+
top: 0;
196+
left: 0;
197+
height: 45%;
198+
width: 15%;
199+
cursor: pointer;
200+
opacity: 100%;
201+
}
202+
.slide-arrow:hover {
203+
opacity: 1;
204+
}
205+
.slide-arrow:after {
206+
content: "\003c";
207+
text-align: center;
208+
display: block;
209+
height: 10%;
210+
width: 100%;
211+
position: absolute;
212+
bottom: 0;
213+
left: 0;
214+
font-size: 3em;
215+
}
216+
.slide-arrow.right:after {
217+
content: "\003e";
218+
}
219+
.slide-arrow.right {
220+
left: auto;
221+
right: 0;
222+
}

‎test/worker-task.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,22 @@ importScripts("dist/language-worker.js");
55

66
function workerOK() {
77
if(self.CSSLanguageService){
8-
postMessage('worker.ok');
8+
postMessage({type: 'worker.ok'});
99
}
1010
}
1111

12+
function getAllSymbols(data) {
13+
const cssMode = self.CSSLanguageService.CSS_MODES[data.cssMode];
14+
const symbols = self.CSSLanguageService.getAllSymbols(data.text, cssMode, data.filePath);
15+
postMessage({type: "getAllSymbols", symbols});
16+
}
17+
1218
self.addEventListener('message', (event) => {
1319
console.log('Worker received: ', event);
1420
const command = event.data.command;
1521
switch (command) {
1622
case 'workerOK': workerOK(); break;
23+
case 'getAllSymbols': getAllSymbols(event.data); break;
1724
default: console.error('unknown worker command: ', command);
1825
}
1926
}, false);

0 commit comments

Comments
 (0)