Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Wikitests // title test : test title via title2 template
About this Dev/wikitest Page Contributor maintained wiki page. | |
---|---|
Support Status | testing |
Difficulty | medium |
Contributor | testing |
Support | Dev/website |
This is the intro template.
This is the first line of the content text outside the intro template.
Modules / Features (alphabetical)[edit]
Anchor (Template)[edit]
Click the link below and it should jump to the "Jump point". There is the id "test-anchor-template"
Jump point
Paragraph to jump over
Archive_Link (Template, nested Widget)[edit]
Different archive link tests, wrapped in div.info-box to prevent over-width on mobile
- No parameter (useless):
- Only text (useless): Whonix Clearnet
- Text and url : Whonix Clearnet
- Text, url, archive=copy : Whonix Clearnet
- Text, url, archive=none : Whonix Clearnet
- Text and url, onion=copy : Kicksecure Onion
- Text and url, onion=w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/ : Kicksecure
- Text and url, archive=copy, onion=w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/ : Kicksecure
Blockquote & Quotation Tests[edit]
Blockquote[edit]
For wiki content writers it is customary to write keywords such as <blockquote> into a separate line for easier readability during editing. But if that has to be avoided and changed in the wiki content (wiki markup), then that would be OK too.
<blockquote>line number one line number two line number three now there will be an empty line this line has leading whitespace last but one line last line</blockquote>
Test result, too much white space:
line number one
line number two
line number three
now there will be an empty line
this line has leading whitespace last but one line
last line
Complex Blockquote Example[edit]
This is how it really looks:
gpg: assuming signed data in 'tor-{{Tor_upstream_version}}.tar.gz' gpg: Signature made Mon 09 Dec 2019 06:21:51 PM UTC gpg: using RSA key 7A02B3521DC75C542BA015456AFEE6D49E92B601 gpg: Good signature from "Nick Mathewson <nickm@alum.mit.edu>" [unknown] gpg: aka "Nick Mathewson <nickm@wangafu.net>" [unknown] gpg: aka "Nick Mathewson <nickm@freehaven.net>" [unknown] gpg: aka "Nick Mathewson <nickm@torproject.org>" [unknown] gpg: WARNING: This key is not certified with a trusted signature! gpg: There is no indication that the signature belongs to the owner. Primary key fingerprint: 2133 BC60 0AB1 33E1 D826 D173 FE43 009C 4607 B1FB Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0 1545 6AFE E6D4 9E92 B601
This is how it should look:
gpg: assuming signed data in 'tor-{{Tor_upstream_version}}.tar.gz' gpg: Signature made Mon 09 Dec 2019 06:21:51 PM UTC gpg: using RSA key 7A02B3521DC75C542BA015456AFEE6D49E92B601 gpg: Good signature from "Nick Mathewson <nickm@alum.mit.edu>" [unknown] gpg: aka "Nick Mathewson <nickm@wangafu.net>" [unknown] gpg: aka "Nick Mathewson <nickm@freehaven.net>" [unknown] gpg: aka "Nick Mathewson <nickm@torproject.org>" [unknown] gpg: WARNING: This key is not certified with a trusted signature! gpg: There is no indication that the signature belongs to the owner. Primary key fingerprint: 2133 BC60 0AB1 33E1 D826 D173 FE43 009C 4607 B1FB Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0 1545 6AFE E6D4 9E92 B601
Potential bug: Between line Primary key fingerprint: 2133 BC60 0AB1 33E1 D826 D173 FE43 009C 4607 B1FB
and line Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0 1545 6AFE E6D4 9E92 B601
there is no newline in the wiki markup and there should be none in the resulting mediawiki auto generated HTML. Some CSS issue probably?
new test blockquote[edit]
line1 after 5 spaces line2 now an empty line line3 line4
blockquote in bullet point[edit]
As the first child
test
As not the first child after a text (or other) node
- 1
test
div class pre blockquote[edit]
real pre
tag:
gpg: assuming signed data in 'tor-{{Tor_upstream_version}}.tar.gz' gpg: Signature made Mon 09 Dec 2019 06:21:51 PM UTC gpg: using RSA key 7A02B3521DC75C542BA015456AFEE6D49E92B601 gpg: Good signature from "Nick Mathewson <nickm@alum.mit.edu>" [unknown] gpg: aka "Nick Mathewson <nickm@wangafu.net>" [unknown] gpg: aka "Nick Mathewson <nickm@freehaven.net>" [unknown] gpg: aka "Nick Mathewson <nickm@torproject.org>" [unknown] gpg: WARNING: This key is not certified with a trusted signature! gpg: There is no indication that the signature belongs to the owner. Primary key fingerprint: 2133 BC60 0AB1 33E1 D826 D173 FE43 009C 4607 B1FB Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0 1545 6AFE E6D4 9E92 B601
div class="pre"
gpg: Signature made Mon 09 Dec 2019 06:21:51 PM UTC gpg: using RSA key 7A02B3521DC75C542BA015456AFEE6D49E92B601 gpg: Good signature from "Nick Mathewson <nickm@alum.mit.edu>" [unknown] gpg: aka "Nick Mathewson <nickm@wangafu.net>" [unknown] gpg: aka "Nick Mathewson <nickm@freehaven.net>" [unknown] gpg: aka "Nick Mathewson <nickm@torproject.org>" [unknown] gpg: WARNING: This key is not certified with a trusted signature! gpg: There is no indication that the signature belongs to the owner. Primary key fingerprint: 2133 BC60 0AB1 33E1 D826 D173 FE43 009C 4607 B1FB
Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0 1545 6AFE E6D4 9E92 B601Quotation Template Tests[edit]
Functional[edit]
Quotation without anything - should show {{{quote}}}
{{{quote}}}
Quotation Two Line Test
Quotation with 2 lines. Should show 2 lines.
Quotation with 2 Lines and Context Test
abc defAuthor,Date,https://www.whonix.org
Simple Quotation with 2 Lines, Context and Image Test
With an image.
123
456https://www.whonix.org Author,Date,
Simple Quotation with 2 Lines, Context and Image Test, special style
With an image.
123
456https://www.whonix.org Author,Date,
Broken[edit]
Bullet Point Quotation with 2 Lines, Context and Image Test
Same as above but below a bullet point. NOTE: This does not work as expected but it acceptable right now because this is caused by a bug in MediaWiki that has been reported.
* bullet point with colon: {{Quotation |image=Deep-web-1106648640.jpg |context=Author,Date,https://www.whonix.org |quote=With an image. abc def}}
Bullet Point Multiple Lines Quotation Test (currently broken)
- 1
Same as above but below a list item.
Without an image.
NOTE: This does not work as expected but it acceptable right now because this is caused by a bug in MediaWiki that has been reported
CodeSelect[edit]
Simple example 1 line
echo "Hello World"
1 line, but inline
Here is an example echo "Hello World" that was the example
2 lines
sudo chmod og+rx /usr/bin/snowflake-client sudo chmod og+rx /usr/bin/snowflake-client
CodeSelect in Lists
- text
- abc
- def ghi123 asölfkasjdölfkajdöslkjasdfölkfjaölksdjaslökdjfaöslkjfaöslkjfdsalökdjfalöksjfaklösjfaslökjfasölkjfasölkjfadsölkjafdsklöfjlköasdjflkösajdfsölkjadsölkjfdaslksafjfkl
- Including pipe symbol ("
|
") (encoded as{{!}}
): echo test | xargs echo - test: abc
CodeSelect "Hello World" but as a button
echo "Hello World"
CodeSelect "Hello World" but as a default button (buttonImage=)
echo "Hello World"
CodeSelect "Hello World" button image, eager loading
echo "Hello World"
CodeSelect with a target pre element
This is example 1 $ sudo apt "example1"
Collapsible Template[edit]
Large title
My large interesting title
My interesting content
Small title
My small interesting title
My interesting content
Community Support Template[edit]
Below are 3 tests. The first without the paramter scope, it should show the page version. The second is the page version (scope=page) and the third one is the chapter version (scope=chapter)
CustomRepo (Template)[edit]
The link to instantpage lib /blob/master/public/libs/instant.page/instantpage.min.js The link to instantpage lib
config-build-shared and specific.json /tree/master/mediawiki-shared/build config-build-shared and specific.json
DiscoverHiddenElements[edit]
- Below are hidden elements. Each should open when you click its link
- One is a headline hidden inside a mw-collapsible #DiscoverHiddenElements_Hidden_Headline
- The other is a headline hidden inside an mw-collapsible, hidden inside a tab content controller #DiscoverHiddenElements_Hidden_Headline_2
- Reference to hidden Footnotes [discover-he-1 1]- show open Footnotes
Hidden Headline
DiscoverHiddenElements Hidden Headline[edit]
Test text
DiscoverHE section1
Section 1 content [discover-he-2 1]
DiscoverHE section2
Section 2 content [discover-he-2 2]
DiscoverHE section3
Section 3 content
Hidden Headline 2
DiscoverHiddenElements Hidden Headline 2
Test text
- ↑ Discover ref1
Reflist to hidden footnotes
DonorCard (Template)[edit]
There is a whole page for tests of the DonorCard Testpage_Donors
Download_Button (Widget)[edit]
text, url, redirectUrl=VirtualBox
text, addToClass, url, os, targetBlank
text, url, os, targetBlank, onion, fontSize
Example with text, url, os, onion, addToClass=text-class, fontsize=20px, targetBlank=true, redirectUrl
Example with signature icon, text and url
Example with sha icon, text and url
Example with signify icon, text and url
Download button width parameter modal=true
opening DownloadButton-PayAsYouGoModal
Expand Button different labels[edit]
Learn more Label
Click to find out
Hidden Content
Show / Hide Label
Click to find out
Hidden Content
Expand Button versus Content Shift Test[edit]
Expand
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Expand Or Collapse All[edit]
On "Expand or Collapse All" Button, 3 expand boxes. Clicking the button will open all boxes on the page not only in this test area
Box 1 Preview
Box 1 content
Box 2 Preview
Box 2 content
Box 3 Preview
Box 3 content
Gallery (MediaWiki)[edit]
Below is a gallery with 3 images, normal styling
-
Debian logo
-
Linux logo
Below is a gallery with 3 images, normal styling with class gallery-white. Only images have white background
-
Debian logo
-
Linux logo
Below the same gallery from above with our thumb gallery styling and justify center
-
Debian logo
-
Linux logo
Below the same gallery from above with our thumb gallery styling and justify center and gallery-white. The whole boxes are white
-
Debian logo
-
Linux logo
GoogleOff (Template)[edit]
These tests can only be verified in browser dev console or in page source code
Simple GoogleOff template test
Div being wrapped in GoogleOff with nosnippet=1
Headline (Template)[edit]
h2, id auto-gen ↓↓↓
Test Headline : h2, id auto-gen
no h (=h1), id=id-test-headline-2 ↓↓↓Test Headline : no h (=h1), id=id-test-headline-2
h3, id=none, addToClass:cs-blue → Code ↓↓↓Test Headline : h3, id=none, addToClass:cs-blue → Code
HtmlComment (Widget)[edit]
The following html comment in wikitext will not be rendered into the source code
The following html comment (via the HtmlComment widget) will be rendered into the source code
Icon (Template)[edit]
Info icon in the color of red
Info icon in the color of blue
Info icon in the color of green, style circle, 2x enlarged
No icon but Text "F12abd-+", with fa-solid (font awesome 6 font family bold), style rounded (=rounded square), color scheme white, with border, 2x enlarged, rotated 180 degree on its head
F12abd-+
Icon red, with thick border, Text f123+, with shadow, style rounded, slim font awesome style
f123+
Icon Bullet List[edit]
Default list with longer and shorter list item
- Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points Plus Points
- Negative Points
Longer list with addClass=inverse minimal, fontSize=20px
- Standard
- Plus Points
- Negative Points
- Equal Points
- Chill Points
IconSet (Template)[edit]
Style h1, text h1, renders to uppercase
h1
5 icons, Style h1, text 1 2 9 10 22
1 2 9 10 22
Style h2, text h2, renders to uppercase
h2
Style h3, text h3, renders to uppercase
h3
Style h4, text h4, renders to uppercase
h4
Style true, text true, renders to uppercase
true
Style false, text false, renders to uppercase
false
Style keyboard, text keyboard, renders to uppercase
keyboard
Info Tooltip[edit]
There is hidden info that can be seen by hovering over the i-icon
Here's the hidden info
Intro paragraph and IntroLike[edit]
The intro template is demonstrated at the top of the page
Below you see the introLike template
Intro like text
with wikitext
and newlines
LeftRightImageText[edit]
Left example, promo style
Right example, with imagelink=/wiki/About, imageright=true
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
mbox test[edit]
Below you should see a box around the test text
mbox text test
Box with image and text test
Box with icon and text test
Mini Modal[edit]
Open MiniModal below by clicking this button Open Modal
Open MiniModal via URL hash, click Dev/wikitest#mini-modal-test
Mini modal test
Mini Modal test content
[edit]
This is a mininav with one standard field, one field with an image icon, one field with an image icon that is too small and one field with an image icon that does not have link=[emptystring]
Below is a mininav with the class for 2 lines and with the special dark look class mn-dark, wrapped in an info box
PayViaPaypal[edit]
Standard implementation, full width
ScrollAutoWrapper[edit]
Below is a very long table that is wrapped automatically by javascript in wikitable auto wrapper. Length should always be 100%, also on mobile
test name 1 | test name 2 |
---|---|
Short info | Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info |
Below is a wikitable that is wrapped inside mw-collapsible (and therefore has no dimensions). So first it will not be enriched, only when the collapsed div will be opened. Click expand. Table should look like above
Open hidden table
test name 3 | test name 4 |
---|---|
Short info | Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info Long Info |
Below is a pre element which has overwidth
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Below is a pre element which has overwidth and is hidden
Open hidden overwide pre lement
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Test Heights for top scrollbar height breakpoint[edit]
Below are height tests, for the top scrollbar height breakpoint to be reached (in relation the the user device). If the element becomes very large (height) relative to the screen then the top scrollbar should be visible See documentation for more info. ScrollAutoWrapper
Height 150px
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Height 300px
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Height 450px
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Height 600px
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
Height 750px
asdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkasdölfjasölkafölkasjfölkasjfölkasjfölajöaiojujflaksjflöaksjlköajsvlköjvölkajföljwaeiojföjaflökjlasjdfölasjdflkjj
[edit]
Below there is a share tooltip for #share-tooltip-test which is the div below
SitenoticeBanner[edit]
Simple example, but strange optic = correct, because it needs to be in #siteNotice
Subdomain Link[edit]
Please test those links on the onion the Tor browser as well
Link to forum, text=Testlink1, sub=forums, append=/c/news/5
Same as above, but export as url
https://forums.kicksecure.com/c/news/5
Same as above, but export as parts
https,kicksecure.com
Tab Controller[edit]
Tab Controller pre-selected tab Test[edit]
The second tab is selected (active)
Tab Controller NO selected tab Test[edit]
No tab has the active parameter. Therefore no content should be shown
Number 201
test1
Number 202
test2
Tab Controller Link test[edit]
All link tabs below (not Title 01 and Title 02) should be actual links for js users
Title 01
Title 01
Title 02
Title 02
Link Type 1
Link Type 2
Link Type 3
Link Type 4
Link Type 5
Tab Controller : Linked Controllers Test[edit]
The following controllers will switch in unison. In case of link-tabs (tabs which are pure links) they will not be switched on. Also important: Section 1 and 6 are asynchronously pre-selected. But once you select a tab they will synchronize and stay synchronize (no common use cases but good to know this behavior)
Tab Controller : Linked Controller with nested Controller[edit]
TODO: description
Section 5
Section 5 content
Section 6
Section 6 content
Nested Tab Test : JS / NOJS[edit]
If you open this page in a normal way then Test2 is pre-selected and if you click tab 3 than Test 3.2 will be pre-selected. However if you open this page with the following link (emphasis on the hash) then Test3 will open and Test3.2 will open as well. And it will scroll to the right position. This link can also be otained by right-clicking the tab and clicking "Save link address"
https://www.kicksecure.com/wiki/Dev/wikitest#Test3.3_Auto-Open
If you deactive Javascript (NOJS) then the above link will send you directly to the selected section
Test1
Test 1 Content
Test2 Selected
Test 2 Content
Test3 Auto-Open
Test3.1
Test 3.1 Content
Test3.2 Selected
Test 3.2 Content
Test3.3 Auto-Open
Test 3.3 Content
Nested Tab Test : No TOC[edit]
In the TOC you will not find the notoc tabs as headlines because they are done with Template:Headline. However the functionality stays the same. And it also works for Nojs.
Look in the TOC above. There is no Tab Test 11 or Tab Test 12 or 14 mentioned. But this link works : https://www.kicksecure.com/wiki/Dev/wikitest?stable=0#tab-test-14-notoc
Tab Test 10
Tab Test 10 Content
Tab Test 11 notoc
Tab Test 11 notoc Content
Tab Test 12 notoc
Tab Test 13
Tab Test 13 Content
Tab Test 14 notoc
Tab Test 14 notoc Content
[edit]
For the tests to be succcessful
- Load the page with JS and without any hash -> both codeSelects need to be initialized correctly with custom scrollbar
- Choose tab 1 and (thereby set the hash), reload the page -> both codeSelects need to be initialized correctly with custom scrollbar
- Choose tab 2 and (thereby set the hash), reload the page -> both codeSelects need to be initialized correctly with custom scrollbar
Tab1_abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Tab2_abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
ThumbGallery (Template)[edit]
Below a thumb gallery with 3 thumb images. Normal mode, so it only changes to gallery mode below 540px screen width
Below a thumb gallery with 3 thumb images. mode=gallery. It should be a nice padded gallery on all sizes
Below a thumb gallery with 3 thumb images. mode=gallery justify right. It should be a nice padded gallery on all sizes. It should be justified right
Thumbnails[edit]
Standard behavior (jumps left and changes size when very small screen)
Non-responsive behavior (stays right and keeps size)
VideoLink[edit]
Video should be available on all 3 given platforms (click icons)
Video style subtle
CSS features[edit]
Col-container[edit]
div with .col-container and .cc-3 wrapping 3 divs 123,456,789
Color schemes[edit]
cs-red
cs-red-light
cs-green
cs-green-light
cs-blue
cs-blue-light
cs-yellow
cs-yellow-light
Columns: use-2-columns, use-3-columns[edit]
Text use-2-columns[edit]
List use-3-columns[edit]
- List element 1
- List element 2
- List element 3
- List element 4
- List element 5
- List element 6
- A
- B
- C
hide-enlarge and thumb-hide-enlarge class[edit]
Original file
File:Swift 128.png|thumb|100px|link=|SWIFT, wrapped in div.thumb-hide-enlarge
File:Swift 128.png|thumb|100px|link=|class=hide-enlarge|SWIF
NoJS classes[edit]
Introduction[edit]
Description is in black. The test cases are in red
Only visible for noJS[edit]
Done.
Only visible for JS[edit]
Done.
Hide for noJS only[edit]
Done.
Hide for JS only[edit]
Done.
Mixed[edit]
External Link Test[edit]
FontAwesome Deprecated Test[edit]
Currently not using this method. Expected to fail.
<i class="fa fa-eercast" aria-hidden="true"></i>
Test START
Test END
HTML Symbol[edit]
❝
❝
Lists Tests[edit]
Unordered List Test[edit]
- one
- two
- three
Ordered Lists Test[edit]
- first
- second
- third
overlength tag test[edit]
pre tag
long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test
long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test
code tag
long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test long test
pre and div.pre tests[edit]
pre test[edit]
The following two lines test1
and test2
are separate pre tags lines. These should be visually separate. Currently functional.
text 1
text 2
div.pre[edit]
Pre without parsing
This is current year {{CURRENTYEAR}}
Div.pre with parsing
This is current year
2024
Variables[edit]
SITENAME
:Kicksecure
SERVER
:https://www.kicksecure.com
SERVERNAME
:www.kicksecure.com
fullurl:page_name
:https://www.kicksecure.com/wiki/Page_name
canonicalurl:FULLPAGENAME
: https://www.kicksecure.com/wiki/Dev/wikitest- atom feed
FULLPAGENAME
: Dev/wikitestNAMESPACE
:
H1[edit]
Test text
H2[edit]
Test text
H3[edit]
Test text
H4[edit]
Test text
H5[edit]
Test text
H6[edit]
Test text
Tables on Mobile[edit]
Check for example Reasons_for_Freedom_Software for word wrap issues.
TODO: add test here
Footnotes[edit]
We believe security software like Kicksecure needs to remain Open Source and independent. Would you help sustain and grow the project? Learn more about our 12 year success story and maybe DONATE!