Skip to content

Commit 62d7bed

Browse files
itaibhitaibh
committed
added a new test page
1 parent 7756fd7 commit 62d7bed

File tree

2 files changed

+262
-0
lines changed

2 files changed

+262
-0
lines changed

‎.vscode/launch.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "chrome",
9+
"request": "launch",
10+
"name": "Launch Chrome against localhost",
11+
"url": "${file}",
12+
"webRoot": "${workspaceFolder}"
13+
}
14+
]
15+
}

‎TestPages/PageWithScrollableArea/index.html

+247
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Cross SDK Test</title>
6+
<style>
7+
body,
8+
html {
9+
margin: 0;
10+
display: flex;
11+
flex-direction: column;
12+
height: 100%;
13+
}
14+
15+
.right p {
16+
writing-mode: vertical-rl;
17+
margin: 10px 2px;
18+
}
19+
20+
header {
21+
background: #dd6312;
22+
color: white;
23+
font-size: larger;
24+
height: 5em;
25+
}
26+
27+
header>p {
28+
margin: 2em;
29+
display: inline-block;
30+
}
31+
32+
header>div.hamburger {
33+
display: inline-block;
34+
font-size: xx-large;
35+
background: rgba(255, 255, 255, 0.5);
36+
color: black;
37+
width: 1.1em;
38+
height: 1.1em;
39+
text-align: center;
40+
border-radius: 50%;
41+
position: absolute;
42+
top: 1em;
43+
right: 1em;
44+
}
45+
46+
.wrapper {
47+
position: absolute;
48+
top: 0;
49+
left: 0;
50+
right: 0;
51+
bottom: 0;
52+
overflow-x: hidden;
53+
overflow-y: auto;
54+
}
55+
56+
section {
57+
display: flex;
58+
flex-direction: row;
59+
flex: 1;
60+
}
61+
62+
aside {
63+
background: #ac4b0a;
64+
color: white;
65+
font-size: larger;
66+
width: 10em;
67+
padding: 1em;
68+
}
69+
70+
footer {
71+
background: #9c5322;
72+
color: white;
73+
font-size: larger;
74+
height: 2em;
75+
padding: 1ex;
76+
}
77+
78+
main {
79+
display: flex;
80+
flex: 1;
81+
position: relative;
82+
}
83+
84+
article {
85+
padding: 2em;
86+
font-size: larger;
87+
text-align: justify;
88+
line-height: 1.25em;
89+
position: relative;
90+
}
91+
92+
article p:nth-of-type(1)::first-letter {
93+
float: left;
94+
font-size: 2.45em;
95+
margin: 0.1em 0.1em 0 0;
96+
border: 1px solid black;
97+
background: aquamarine;
98+
padding: 0.18em;
99+
}
100+
101+
.fin {
102+
text-align: center;
103+
}
104+
</style>
105+
</head>
106+
107+
<body>
108+
<header class="navbar">
109+
<p>This is the navigation bar</p>
110+
<div class="hamburger">&equiv;</div>
111+
</header>
112+
<section>
113+
<aside>
114+
<p>This</p>
115+
<p>is</p>
116+
<p>the</p>
117+
<p>information</p>
118+
<p>sidebar</p>
119+
</aside>
120+
121+
<main class="page">
122+
<div class="wrapper">
123+
<article>
124+
<h1>Lorem Ipsum</h1>
125+
<div id="lipsum">
126+
<p>
127+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta diam sodales ligula aliquam gravida.
128+
Donec sit amet metus sed tellus bibendum pharetra. Vivamus vel enim ex. Ut pretium ac turpis in ornare.
129+
Donec sodales odio semper nibh elementum, sed elementum orci viverra. Vestibulum sed enim consectetur,
130+
pharetra elit et, semper dolor. Sed a nibh auctor, varius est sit amet, accumsan sem.
131+
</p>
132+
<p>
133+
Aenean imperdiet ante sed diam eleifend elementum. Nullam porttitor, diam sed interdum hendrerit, magna
134+
nulla faucibus mauris, a aliquet mauris mauris at elit. Vestibulum consequat tempus quam, faucibus mollis
135+
purus porttitor vel. Sed dignissim dictum purus ac pellentesque. Sed consequat dictum leo, at volutpat
136+
augue lacinia iaculis. Nullam pulvinar lorem dui, sit amet hendrerit tortor efficitur ut. Nam in vulputate
137+
tellus. Suspendisse potenti. Aliquam non purus nec erat varius luctus in et augue. Pellentesque nulla
138+
odio, tincidunt
139+
non suscipit a, venenatis tristique sem. Proin a eros maximus, sagittis leo id, elementum augue. Nunc
140+
aliquet,
141+
mi pretium ullamcorper ultrices, lorem justo fermentum neque, quis ultricies ex massa quis velit. Praesent
142+
tristique libero nisl, at suscipit nunc finibus id. Duis varius sem at augue ultrices vehicula. Vivamus
143+
vehicula neque feugiat, auctor leo fringilla, vehicula ante. Nullam vitae nunc ac urna vestibulum feugiat
144+
eu
145+
id libero.
146+
</p>
147+
<p>
148+
Donec aliquam ipsum sit amet tellus sagittis fringilla. Nunc ullamcorper nisl id porta mollis. Aliquam
149+
odio
150+
tortor, gravida nec accumsan id, sollicitudin id est. Vivamus at lacinia leo. Aliquam pharetra metus quis
151+
tellus eleifend consectetur. Donec sagittis venenatis fermentum. Praesent fermentum dignissim iaculis.
152+
</p>
153+
<p>
154+
Curabitur elementum efficitur lorem nec ultricies. Suspendisse placerat, purus quis efficitur posuere,
155+
turpis
156+
urna convallis orci, quis scelerisque nulla nulla et eros. Sed vel convallis velit. Sed vulputate ante
157+
eleifend ullamcorper maximus. Vestibulum ac leo vitae erat porttitor consectetur quis in urna. Suspendisse
158+
pharetra in ipsum sit amet mattis. Nam ultrices convallis purus vel dictum. Donec vitae lacus augue.
159+
Suspendisse potenti. Vestibulum nibh lacus, feugiat sit amet elementum vel, mollis nec massa. Duis
160+
tincidunt
161+
eleifend tortor, in euismod purus. Mauris nibh elit, placerat id condimentum nec, rutrum a ipsum. Proin
162+
suscipit lorem in mollis interdum. Ut finibus sapien neque, in venenatis ligula aliquet id. Aliquam erat
163+
volutpat. In hac habitasse platea dictumst.
164+
</p>
165+
<p>
166+
Curabitur dictum, tellus quis elementum efficitur, erat libero lobortis ipsum, in bibendum lectus tortor
167+
ut
168+
urna. Phasellus volutpat volutpat velit eu rhoncus. Ut vehicula felis porttitor sollicitudin finibus. Sed
169+
sed
170+
neque pulvinar, congue enim quis, iaculis dolor. Duis tristique purus ac pretium dapibus. Quisque faucibus
171+
mollis tempor. In hac habitasse platea dictumst. Suspendisse nec ante eget ante pulvinar bibendum.
172+
</p>
173+
<p>
174+
Quisque ornare faucibus erat, sed congue dolor aliquet in. Aliquam vitae sem a erat dignissim sagittis.
175+
Sed
176+
dapibus nulla odio, vitae pellentesque nunc tristique ut. Donec suscipit ac felis non tempus. Vestibulum
177+
felis
178+
magna, tincidunt nec purus in, porttitor porta urna. Etiam lacus ex, congue id efficitur a, pretium
179+
molestie
180+
felis. Fusce sollicitudin tortor vitae varius dictum. Quisque vitae suscipit purus, maximus fermentum
181+
tellus.
182+
Duis vitae ipsum eget tellus facilisis suscipit ut non nisi. Donec velit ligula, molestie elementum metus
183+
nec,
184+
pulvinar placerat est. Pellentesque justo eros, porttitor et arcu eu, rhoncus consequat lectus. Proin
185+
tincidunt velit ac lacinia sodales. Morbi feugiat tortor odio, ornare euismod urna imperdiet in. Nulla
186+
gravida
187+
tortor massa.
188+
</p>
189+
<p>
190+
Sed dignissim luctus nulla, quis condimentum erat hendrerit et. Nullam nec volutpat ligula. Maecenas
191+
luctus
192+
orci nunc, a viverra augue ullamcorper nec. Cras sed sapien ut massa fringilla semper vel a nibh. Integer
193+
et
194+
mauris condimentum, consectetur orci id, finibus mi. Sed imperdiet vulputate tortor, non dictum mi feugiat
195+
nec. Proin turpis nibh, imperdiet quis turpis quis, dapibus tincidunt ante. Cras vitae tincidunt leo. In
196+
vitae
197+
velit tortor. Proin quis magna porta, dignissim purus vel, sodales nunc. Nulla congue diam sed interdum
198+
fermentum. Suspendisse elementum pulvinar nisi, ac imperdiet erat feugiat vitae. Integer venenatis est ac
199+
vehicula dictum. Praesent quis nibh sit amet purus suscipit venenatis sed finibus nisl.
200+
</p>
201+
<p>
202+
Nam ut libero sem. Nulla placerat libero sed nisi dictum faucibus. Nulla facilisi. Ut ac vehicula elit.
203+
Pellentesque interdum risus elit, eget tincidunt turpis sollicitudin nec. Suspendisse nec tellus nec
204+
tortor
205+
placerat facilisis. Quisque tincidunt hendrerit dolor, eu feugiat augue tempus id. Sed at ornare nibh.
206+
</p>
207+
<p>
208+
Sed elit elit, convallis id felis non, tempus vulputate diam. Vestibulum tempus fringilla elit, et
209+
tincidunt
210+
lacus tincidunt at. Nunc at blandit nulla. Morbi accumsan massa finibus, molestie metus eget, luctus
211+
justo.
212+
Donec semper est id tortor faucibus pretium. Cras sed blandit mauris. Duis neque urna, volutpat in mollis
213+
ac,
214+
elementum vel mauris. Pellentesque cursus, nibh non fermentum tristique, quam odio sagittis lacus, eu
215+
egestas
216+
risus libero in purus. In ante magna, commodo et nibh eu, vehicula lacinia nisl. Aliquam sit amet nibh et
217+
nibh
218+
malesuada dignissim quis et odio. Quisque mattis sapien ac nisi aliquam, eu tempus lectus feugiat. Etiam
219+
ac
220+
volutpat erat, quis viverra tortor.
221+
</p>
222+
<p>
223+
Cras iaculis tincidunt tellus, a dictum lacus elementum ut. Nunc varius, lacus quis iaculis scelerisque,
224+
nibh
225+
lacus scelerisque libero, a semper risus turpis vitae metus. Aliquam ornare tincidunt nisl, non auctor
226+
eros
227+
vehicula non. Donec nec pulvinar dolor. Sed pulvinar quam dictum tortor posuere dictum. Integer porta
228+
sapien
229+
a
230+
neque placerat, nec efficitur neque semper. Vivamus rhoncus lacus at massa consectetur porttitor. Vivamus
231+
elementum hendrerit lorem nec tincidunt. In sollicitudin porttitor turpis, eu finibus sem varius in.
232+
</p>
233+
<p class="fin">~ FIN ~</p>
234+
</div>
235+
</article>
236+
</div>
237+
</main>
238+
<div class="right">
239+
<p>This is just for margin.</p>
240+
</div>
241+
</section>
242+
<footer>
243+
<p>This is the footer.</p>
244+
</footer>
245+
</body>
246+
247+
</html>

0 commit comments

Comments
 (0)