{{Header}} __NOINDEX__
{{title2|title=
Wikitests // title test : test title via title2 template
}}
{{#seo:
|description=test
}}
{{devwiki}}
{{Contributor|
|status=testing
|about=About this {{PAGENAME}} Page
|difficulty=medium
|contributor=testing
|support=[[Dev/website]]
}}
{{intro|
This is the intro template.
}}
This is the first line of the content text outside the intro template.

= Modules / Features (alphabetical) =

== Anchor (Template) ==

Click the link below and it should jump to the "Jump point". There is the id "test-anchor-template"

{{Anchor|test-anchor-template}}
Jump point

Paragraph to jump over

[[#test-anchor-template]]

== Archive_Link (Template, nested Widget) ==

Different archive link tests, wrapped in div.info-box to prevent over-width on mobile

<div class="info-box">
* No parameter (useless): {{Archive_link}}
* Only text (useless): {{Archive_link|text=Whonix Clearnet}}
* Text and url : {{Archive_link|text=Whonix Clearnet|url=https://www.whonix.org}}
* Text, url, archive=copy : {{Archive_link|text=Whonix Clearnet|archive=copy|url=https://www.whonix.org}}
* Text, url, archive=none : {{Archive_link|text=Whonix Clearnet|archive=none|url=https://www.whonix.org}}
* Text and url, onion=copy : {{Archive_link|text=Kicksecure Onion|onion=copy|url=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/}}
* Text and url, onion=w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/ : {{Archive_link|text=Kicksecure|onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/|url=https://www.kicksecure.com}}
* Text and url, archive=copy, onion=w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/ : {{Archive_link|text=Kicksecure|archive=copy|onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/|url=https://www.kicksecure.com}}
</div>

== Blockquote & Quotation Tests ==

=== Blockquote ===

For wiki content writers it is customary to write keywords such as <nowiki><blockquote></nowiki> 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.

<pre>
<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>
</pre>

Test result, too much white space:

<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>

=== Complex Blockquote Example ===
This is how it really looks:

<blockquote>
<pre>
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
</pre>
</blockquote>

This is how it should look:

<pre>
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
</pre>

Potential bug: Between line <code>Primary key fingerprint: 2133 BC60 0AB1 33E1 D826  D173 FE43 009C 4607 B1FB</code> and line <code>Subkey fingerprint: 7A02 B352 1DC7 5C54 2BA0  1545 6AFE E6D4 9E92 B601</code> 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 ===
<blockquote>
<pre>
line1    after 5 spaces
line2    now an empty line

line3
line4
</pre>
</blockquote>

=== blockquote in bullet point ===

As the first child

* <blockquote>test</blockquote>

As not the first child after a text (or other) node

* 1 <blockquote>test</blockquote>

=== div class pre blockquote ===
real <code>pre</code> tag:

<pre>
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
</pre>

<code>div class="pre"</code>

<div class="pre">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>

=== Quotation Template Tests ===
==== Functional ====
Quotation without anything - should show <nowiki>{{{quote}}}</nowiki>

{{Quotation}}

'''Quotation Two Line Test'''

{{Quotation|quote=
Quotation with 2 lines.

Should show 2 lines.
}}

'''Quotation with 2 Lines and Context Test'''

{{Quotation
|context=Author,Date,https://www.whonix.org
|quote=
abc

def}}

'''Simple Quotation with 2 Lines, Context and Image Test
'''

{{Quotation
|image=Deep-web-1106648640.jpg
|context=Author,Date,https://www.whonix.org
|quote=With an image.

123

456}}

'''Simple Quotation with 2 Lines, Context and Image Test, special style
'''

{{Quotation
|special=1
|image=Deep-web-1106648640.jpg
|context=Author,Date,https://www.whonix.org
|quote=With an image.

123

456}}

==== Broken ====
'''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.

<pre>
* bullet point with colon: {{Quotation
|image=Deep-web-1106648640.jpg
|context=Author,Date,https://www.whonix.org
|quote=With an image.

abc

def}}
</pre>

'''Bullet Point Multiple Lines Quotation Test''' (currently broken)

* 1 {{Quotation|quote=
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 ==

Simple example 1 line

{{CodeSelect|code=echo "Hello World"}}

1 line, but inline

Here is an example {{CodeSelect|code=echo "Hello World"|inline=true}} that was the example

2 lines

{{CodeSelect|code=
sudo chmod og+rx /usr/bin/snowflake-client
sudo chmod og+rx /usr/bin/snowflake-client
}}

CodeSelect in Lists

* text
* {{CodeSelect|code=abc}}
* {{CodeSelect|code=
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 ("<code>|</code>") (encoded as <code><nowiki>{{!}}</nowiki></code>): {{CodeSelect|code=
echo test {{!}} xargs echo
}}
* test: {{CodeSelect|code=abc}}

CodeSelect "Hello World" but as a button

{{CodeSelect|code=echo "Hello World"|buttonImage=/w/images/8/8c/Supermenu3.png}}

CodeSelect "Hello World" but as a default button (buttonImage=)

{{CodeSelect|code=echo "Hello World"|buttonImage=}}

CodeSelect "Hello World" button image, eager loading

{{CodeSelect|code=echo "Hello World"|buttonImage=/w/images/8/8c/Supermenu3.png|buttonImageEager=true}}

CodeSelect with a target pre element

{{CodeSelect|target=#my-codeselect-target-example1}}
<pre id="my-codeselect-target-example1">
This is
example 1
$ sudo apt "example1"
</pre>

== Collapsible Template ==

Large title

{{Collapsible
|title=My large interesting title
|content=My interesting content
}}

Small title

{{Collapsible
|title=My small interesting title
|smallTitle=true
|content=My interesting content
}}

== Community Support Template ==

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)

{{Community_Support}}

{{Community Support|scope=page}}

{{Community Support|scope=chapter}}

== CustomRepo (Template) ==

{{CustomRepo|CustomScrollbar.js}}

{{CustomRepo|alt=/blob/master/public/libs/instant.page/instantpage.min.js The link to instantpage lib}}

{{CustomRepo|alt=/tree/master/mediawiki-shared/build config-build-shared and specific.json}}

== DiscoverHiddenElements ==

# 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 <ref group="discover-he-1">Discover ref1</ref>- show open Footnotes

<div class="info-box mw-collapsible mw-collapsed">
Hidden Headline
<div class="mw-collapsible-content">
=== DiscoverHiddenElements Hidden Headline ===
Test text
</div>
</div>

{{Tab
|type=controller
|content=
{{Tab|title= ===DiscoverHE section1===|addToClass=info-box|content=Section 1 content <ref group="discover-he-2">Discover ref 2</ref>}}
{{Tab|title= ===DiscoverHE section2===|addToClass=info-box|content=Section 2 content <ref group="discover-he-2">Discover ref 3</ref>}}
{{Tab|title= ===DiscoverHE section3===|addToClass=info-box|content=
Section 3 content
<div class="info-box mw-collapsible mw-collapsed">
Hidden Headline 2
<div class="mw-collapsible-content">
==== DiscoverHiddenElements Hidden Headline 2 ====
Test text
</div>
</div>
{{reflist|group=discover-he-1}}
}}
}}

Reflist to hidden footnotes {{reflist|group=discover-he-2}}

== DonorCard (Template) ==

There is a whole page for tests of the DonorCard [[Testpage_Donors]]

== Download_Button (Widget) ==

text, url, redirectUrl=VirtualBox

{{#widget:Download_Button
 |text=DownloadTest1
 |url=/derivative.asc
 |redirectUrl=/wiki/VirtualBox
}}

text, addToClass, url, os, targetBlank

{{#widget:Download_Button
 |text=DownloadTest2
 |addToClass=test-class
 |url=/wiki/Download
 |os=osx|os=debian|os=kvm|os=linux|os=qubes|os=usb|os=virtualbox|os=windows
 |targetBlank=true
}}

text, url, os, targetBlank, onion, fontSize

{{#widget:Download_Button
 |text=DownloadTest3
 |url=/wiki/Download
 |os=osx|os=debian|os=kvm|os=linux
 |targetBlank=true
 |onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/
 |fontSize=20
}}

Example with text, url, os, onion, addToClass=text-class, fontsize=20px, targetBlank=true, redirectUrl

{{#widget:Download_Button
|text=Test for Download Button
|url=/wiki/Download
|os=linux
|os=windows
|os=osx
|onion=http://www.w5j6stm77zs6652pgsij4awcjeel3eco7kvipheu6mtr623eyyehj4yd.onion/wiki/Download
|addToClass=test-class
|fontsize=20px
|targetBlank=true
|redirectUrl=/wiki/About
}}

Example with signature icon, text and url

{{#widget:Download_Button
|icon=sig
|text=Signature test
|url=/wiki/Download
}}

Example with sha icon, text and url

{{#widget:Download_Button
|icon=sha
|text=Sha test
|url=/wiki/Download
}}

Example with signify icon, text and url

{{#widget:Download_Button
|icon=sigf
|text=Signify test
|url=/wiki/Download
}}

Download button width parameter <code>modal=true</code> opening DownloadButton-PayAsYouGoModal

{{#widget:Download_Button
|text=DownloadTest Modal
|url=/derivative.asc
|modal=true
}}

== Expand Button different labels ==

Learn more Label

<div class="mw-collapsible mw-collapsed toccolours"  data-expandtext="Learn More" data-collapsetext="Show Less">
Click to find out
<div class="mw-collapsible-content">
Hidden Content
</div>
</div>

Show / Hide Label

<div class="mw-collapsible mw-collapsed toccolours" data-expandtext="Show" data-collapsetext="Hide">
Click to find out
<div class="mw-collapsible-content">
Hidden Content
</div>
</div>

== Expand Button versus Content Shift Test ==

<div class="mw-collapsible mw-collapsed toccolours">
Expand
<div class="mw-collapsible-content">
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.
</div>
</div>

== Expand Or Collapse All ==

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

{{Expand_or_Collapse_All}}

<div class="mw-collapsible mw-collapsed toccolours">
Box 1 Preview
<div class="mw-collapsible-content">
Box 1 content
</div>
</div>

<div class="mw-collapsible mw-collapsed toccolours">
Box 2 Preview
<div class="mw-collapsible-content">
Box 2 content
</div>
</div>

<div class="mw-collapsible mw-collapsed toccolours">
Box 3 Preview
<div class="mw-collapsible-content">
Box 3 content
</div>
</div>

== Gallery (MediaWiki) ==

Below is a gallery with 3 images, normal styling

<gallery>
File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]
File:Debian.png|thumb|100px|Debian logo
File:Linuxkerneltux.png|thumb|100px|Linux logo
</gallery>

Below is a gallery with 3 images, normal styling with class gallery-white. Only images have white background

<gallery class="gallery-white">
File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]
File:Debian.png|thumb|100px|Debian logo
File:Linuxkerneltux.png|thumb|100px|Linux logo
</gallery>

<div class="vspacer-10"></div>

Below the same gallery from above with our thumb gallery styling and justify center

<gallery class="thumb-gallery-style justify-center">
File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]
File:Debian.png|thumb|100px|Debian logo
File:Linuxkerneltux.png|thumb|100px|Linux logo
</gallery>

<div class="vspacer-10"></div>

Below the same gallery from above with our thumb gallery styling and justify center and gallery-white. The whole boxes are white

<gallery class="thumb-gallery-style justify-center gallery-white">
File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]
File:Debian.png|thumb|100px|Debian logo
File:Linuxkerneltux.png|thumb|100px|Linux logo
</gallery>

== GoogleOff (Template) ==

These tests can only be verified in browser dev console or in page source code

Simple GoogleOff template test
{{GoogleOff|content=Simple GoogleOff template test}}

Div being wrapped in GoogleOff with nosnippet=1
{{GoogleOff|nosnippet=1|content=<div>Div being wrapped in GoogleOff with nosnippet=1</div>}}

== Headline (Template) ==

h2, id auto-gen ↓↓↓
{{Headline|h=2|content=Test Headline : h2, id auto-gen}}
no h (=h1), id=id-test-headline-2 ↓↓↓
{{Headline|id=id-test-headline-2|content=Test Headline : no h (=h1), id=id-test-headline-2}}
h3, id=none, addToClass:cs-blue → Code ↓↓↓
{{Headline|h=3|id=none|addToClass=cs-blue|content=Test Headline : h3, id=none, addToClass:cs-blue → Code}}

== HtmlComment (Widget) ==

The following html comment in wikitext will not be rendered into the source code
<!-- Comment will not be rendered -->

The following html comment (via the HtmlComment widget) will be rendered into the source code
{{#widget:HtmlComment|content=Html comment that is rendered}}

== Icon (Template) ==

Info icon in the color of red

{{Icon|fa-solid fa-info cs-red}}

Info icon in the color of blue

{{Icon|style=circle|fa-solid fa-info cs-blue}}

Info icon in the color of green, style circle, 2x enlarged

{{Icon|style=circle|fa-solid fa-info fa-2x cs-green}}

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

{{Icon|style=rounded|border=true|text=F12abd-+|fa-solid fa-2x fa-rotate-180 cs-white}}

Icon red, with thick border, Text f123+, with shadow, style rounded, slim font awesome style

{{Icon|style=rounded|border=thick|shadow=true|text=f123+|fa-regular cs-red}}

== Icon Bullet List ==

Default list with longer and shorter list item

{{#widget:Icon_Bullet_List
|item=fa-solid fa-check,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 
|item=fa-solid fa-minus,Negative Points
}}

Longer list with addClass=inverse minimal, fontSize=20px

{{#widget:Icon_Bullet_List|addClass=inverse minimal|fontSize=20px
|item=fa-solid fa-star,Standard
|item=fa-solid fa-check cs-green,Plus Points
|item=fa-solid fa-times cs-red,Negative Points
|item=fa-solid fa-minus cs-yellow,Equal Points
|item=fa-solid fa-check cs-blue,Chill Points
}}

== IconSet (Template) ==

Style h1, text h1, renders to uppercase

{{IconSet|h1|h1}}

5 icons, Style h1, text 1 2 9 10 22

{{IconSet|h1|1}} {{IconSet|h1|2}} {{IconSet|h1|9}} {{IconSet|h1|10}} {{IconSet|h1|22}}

Style h2, text h2, renders to uppercase

{{IconSet|h2|h2}}

Style h3, text h3, renders to uppercase

{{IconSet|h3|h3}}

Style h4, text h4, renders to uppercase

{{IconSet|h4|h4}}

Style true, text true, renders to uppercase

{{IconSet|true|true}}

Style false, text false, renders to uppercase

{{IconSet|false|false}}

Style keyboard, text keyboard, renders to uppercase

{{IconSet|keyboard|keyboard}}

== Info Tooltip ==

There is hidden info that can be seen by hovering over the i-icon

<span class="info-tooltip"><span>Here's the hidden info</span></span>

== Intro paragraph and IntroLike ==

The intro template is demonstrated at the top of the page

Below you see the introLike template

{{introLike|
Intro like text

'''with wikitext'''

and newlines
}}

== LeftRightImageText ==

Left example, promo style

{{#widget:LeftRightImageText
|image=/w/images/thumb/c/c6/Self-support.jpg/799px-Self-support.jpg?20230412112808
|addToClass=promo-style
|text=
<b>Left example</b>
<p>
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.
</p>
}}

Right example, with imagelink=/wiki/About, imageright=true

{{#widget:LeftRightImageText
|image=/w/images/thumb/c/c6/Self-support.jpg/799px-Self-support.jpg?20230412112808
|imagelink=/wiki/About
|imageright=true
|text=
<b>Right example</b>
<p>
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.
</p>
}}

== mbox test ==

Below you should see a box around the test text

{{mbox|text=
mbox text test
}}

Box with image and text test

{{mbox
| image = [[File:Kicksecure-image-seal.svg|40px|alt=Test]]
| text = My Text here
}}

Box with icon and text test

{{mbox
| icon = fa-solid fa-info cs-red-light
| text = My Text here
}}

== Mini Modal ==

Open MiniModal below by clicking this button
<span id="open-mini-modal-test" class="cs-blue padding-left-10 padding-right-10 padding-top-10 padding-bottom-10">Open Modal</span>

Open MiniModal via URL hash, click [[Dev/wikitest#mini-modal-test]]

<div class="mini-modal" id="mini-modal-test" data-url-hash="mini-modal-test">
<div class="info-box">
{{Headline|content=Mini modal test}}

Mini Modal test content
</div>
</div>

== Mini Navigation / Mininav ==

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]

<div class="mininav">
* [[Download]]
* [[File:Tux.png|50px|link=]] [[Verify the images using Linux|Linux using gpg]]
* [[File:Windows_logo_-_2012.svg.png|5px|link=]] [[Verify_the_images_using_Windows|Windows using Gpg4win]]
* [[File:rsz_osx.png|50px]] [[Verify_the_images_using_macOS|macOS using GPGTools]]
</div>

Below is a mininav with the class for 2 lines and with the special dark look class mn-dark, wrapped in an info box

<div class="info-box">
<div class="mininav mn-dark mn-2-lines">
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
* [[Download]]
</div>
</div>

== PayViaPaypal ==

Standard implementation, full width

<div class="pay-via-paypal-module">[nojs text]</div>

== ScrollAutoWrapper ==

Below is a very long table that is wrapped automatically by javascript in wikitable auto wrapper. Length should always be 100%, also on mobile

{| class="wikitable"
! test name 1 !! test name 2
|-
| Short info || <pre>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 </pre>
|}

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

<div class="mw-collapsible mw-collapsed toccolours">
Open hidden table
<div class="mw-collapsible-content">
{| class="wikitable"
! test name 3 !! test name 4
|-
| Short info || <pre>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 </pre>
|}
</div>
</div>

Below is a pre element which has overwidth

<pre>
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
</pre>

Below is a pre element which has overwidth and is hidden

<div class="mw-collapsible mw-collapsed toccolours">
Open hidden overwide pre lement
<div class="mw-collapsible-content">
<pre>
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
</pre>
</div>
</div>

=== Test Heights for top scrollbar height breakpoint ===

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. [[Dev/mediawiki#ScrollAutoWrapper|ScrollAutoWrapper]]

Height 150px
<pre style="height: 200px">
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
</pre>

Height 300px
<pre style="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
</pre>

Height 450px
<pre style="height: 400px">
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
</pre>

Height 600px
<pre style="height: 500px">
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
</pre>

Height 750px
<pre style="height: 500px">
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
</pre>

== Share Tooltip ==

Below there is a share tooltip for #share-tooltip-test which is the div below

<span class="share-tooltip" data-anchor="share-tooltip-test" data-chapter="Share Tooltip test"></span>

<div id="share-tooltip-test">
Anchor link #share-tooltip-test
</div>

== SitenoticeBanner ==

Simple example, but strange optic = correct, because it needs to be in #siteNotice

{{SitenoticeBanner
|active=true
|id=b001
|href=/wiki/Donate
|html=<img class="icon" src="/w/images/0/0b/Grow-symbol.png" width="53" height="40" alt="grow symbol"><span>Want to help us grow?</span>
}}

== Subdomain Link ==

Please test those links on the onion the Tor browser as well

Link to forum, text=Testlink1, sub=forums, append=/c/news/5

{{Subdomain_link
|text=Testlink1
|sub=forums
|append=/c/news/5
}}

Same as above, but export as url

{{Subdomain_link
|text=Testlink1
|sub=forums
|append=/c/news/5
|result=url
}}

Same as above, but export as parts

{{Subdomain_link
|sub=forums
|append=/c/news/5
|result=parts
}}

== Tab Controller ==

=== Tab Controller pre-selected tab Test ===

The second tab is selected (active)

{{Tab
|type=controller
|content=
{{Tab
|addToClass=info-box
|title= === Number 1 ===
|content=test1
}}
{{Tab
|active=true
|addToClass=info-box
|title= === Number 2 ===
|content=test2
}}
{{Tab
|addToClass=info-box
|title= === Number 3 ===
|image=[[File:Logo-linux-500x500.png|25px]]
|content=test3
}}
{{Tab
|addToClass=info-box
|title= === A link ===
|content=[[Donate]]
}}
}}

=== Tab Controller NO selected tab Test ===

No tab has the active parameter. Therefore no content should be shown

{{Tab
|type=controller
|content=
{{Tab
|addToClass=info-box
|title= ==== Number 201 ====
|content=test1
}}
{{Tab
|addToClass=info-box
|title= ==== Number 202 ====
|content=test2
}}
}}

=== Tab Controller Link test ===

All link tabs below (not Title 01 and Title 02) should be actual links for js users

{{Tab
|type=controller
|content=
{{Tab
|title= === Title 01 ===
|content=Title 01
}}
{{Tab
|title= === Title 02 ===
|content=Title 02
}}
{{Tab
|title= === Link Type 1 ===
|content=[https://www.whonix.org]
}}
{{Tab
|title= === Link Type 2 ===
|content=[[Testpage2]]
}}
{{Tab
|title= === Link Type 3 ===
|content=[https://www.whonix.org]
}}
{{Tab
|title= === Link Type 4 ===
|content=[https://www.whonix.org Whonix]
}}
{{Tab
|title= === Link Type 5 ===
|content=[[Testpage2|The Testpage 2]]
}}
}}

=== Tab Controller : Linked Controllers Test ===

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
|type=controller
|addToClass=tcc-indent tcc-dark
|linkid=link1
|content=
{{Tab
|active=true
|title= ====Section 1====
|type=section
|image=[[File:Logo-linux-500x500.png|25px]]
|addToClass=special-look
|content=Section 1 content
}}
{{Tab
|title= ====Section 2====
|content=Section 2 content
}}
{{Tab
|title=====Section 3====
|content= Section 3 content
}}
{{Tab
|title=====Section 4====
|content=Section 4 content
}}
}} <!-- end of tab controller 1 -->

{{Tab
|type=controller
|linkid=link1
|content=
{{Tab
|title=====Section 5====
|content=Section 5 content
}}
{{Tab
|title=====Section 6====
|active=true
|content=Section 6 content
}}
{{Tab
|title=====Section 7 Link====
|content=[[Donate]]
}}
}} <!-- end of tab controller 2 -->

=== Tab Controller : Linked Controller with nested Controller ===
TODO: description

{{Tab
|type=controller
|addToClass=tcc-indent tcc-dark
|linkid=link1
|content=
{{Tab
|active=true
|title= ====Section 1====
|type=section
|image=[[File:Logo-linux-500x500.png|25px]]
|addToClass=special-look
|content=Section 1 content
}}
{{Tab
|title= ====Section 2====
|content=Section 2 content
}}
}} <!-- end of tab controller 1 -->

{{Tab
|type=controller
|linkid=link1
|content=
{{Tab
|title=====Section 5====
|content=Section 5 content
}}
{{Tab
|title=====Section 6====
|active=true
|content=Section 6 content
}}
}} <!-- end of tab controller 2 -->

=== Nested Tab Test : JS / NOJS ===

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

{{Tab
|type=controller
|addToClass=tcc-indent
|content=
{{Tab
|title= === Test1 ===
|content= Test 1 Content
}}
{{Tab
|title= === Test2 Selected ===
|active=true
|content= Test 2 Content
}}
{{Tab
|title= === Test3 Auto-Open ===
|content=
{{Tab
|type=controller
|addToClass=tcc-indent
|content=
{{Tab
|title= ==== Test3.1 ====
|content= Test 3.1 Content
}}
{{Tab
|title= ==== Test3.2 Selected ====
|active=true
|content= Test 3.2 Content
}}
{{Tab
|title= ==== Test3.3 Auto-Open ====
|content= Test 3.3 Content
}}
}}
}}
}}

=== Nested Tab Test : No TOC ===

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
|type=controller
|addToClass=tcc-indent
|content=
{{Tab
|title= === Tab Test 10 ===
|content=Tab Test 10 Content
}}
{{Tab
|title={{Headline|h=3|content=Tab Test 11 notoc}}
|active=true
|content=Tab Test 11 notoc Content
}}
{{Tab
|title={{Headline|h=3|content=Tab Test 12 notoc}}
|content=
{{Tab
|type=controller
|addToClass=tcc-indent
|content=
{{Tab
|title= ==== Tab Test 13 ====
|content=Tab Test 13 Content
}}
{{Tab
|title={{Headline|h=4|content=Tab Test 14 notoc}}
|active=true
|content=Tab Test 14 notoc Content
}}
}}
}}
}}

=== Tab Controller hidden overlong CodeSelect tests ===

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

{{Tab
|type=controller
|content=
{{Tab
|addToClass=info-box
|title= === TC hidden CS test Number 1 ===
|content={{CodeSelect|code=Tab1_abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz}}
}}
{{Tab
|addToClass=info-box
|title= === TC hidden CS test Number 2 ===
|content={{CodeSelect|code=Tab2_abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz}}
}}
}}

== ThumbGallery (Template) ==

Below a thumb gallery with 3 thumb images. Normal mode, so it only changes to gallery mode below 540px screen width

{{ThumbGallery|
[[File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]]]
[[File:Debian.png|thumb|100px|Debian logo]]
[[File:Linuxkerneltux.png|thumb|100px|Linux logo]]
}}

<div class="vspacer-10"></div>

Below a thumb gallery with 3 thumb images. mode=gallery. It should be a nice padded gallery on all sizes

{{ThumbGallery|mode=gallery|
[[File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]]]
[[File:Debian.png|thumb|100px|Debian logo]]
[[File:Linuxkerneltux.png|thumb|100px|Linux logo]]
}}

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

<div class="vspacer-10"></div>

{{ThumbGallery|mode=gallery|justify=right|
[[File:Kicksecure-basic-logo.png|thumb|100px|[[Dev/Logo|Kicksecure logo]]]]
[[File:Debian.png|thumb|100px|Debian logo]]
[[File:Linuxkerneltux.png|thumb|100px|Linux logo]]
}}

<div class="vspacer-10"></div>

== Thumbnails ==

Standard behavior (jumps left and changes size when very small screen)

[[File:Faq-463379640.jpg|thumb]]

<div class="vspacer-10"></div>

Non-responsive behavior (stays right and keeps size)

<div class="thumb-not-responsive">
[[File:Faq-463379640.jpg|thumb]]
</div>

<div class="vspacer-10"></div>

== VideoLink ==

Video should be available on all 3 given platforms (click icons)

{{VideoLink|videoid=6nHufztdkUI|text=Test video}}

Video style subtle

{{VideoLink|style=subtle|videoid=6nHufztdkUI|text=Test video}}

= CSS features =

== Col-container ==

div with .col-container and .cc-3 wrapping 3 divs 123,456,789

<div class="col-container cc-3">
<div>123</div>
<div>456</div>
<div>789</div>
</div>

== Color schemes ==

<span class="cs-red">cs-red</span>

<span class="cs-red-light">cs-red-light</span>

<span class="cs-green">cs-green</span>

<span class="cs-green-light">cs-green-light</span>

<span class="cs-blue">cs-blue</span>

<span class="cs-blue-light">cs-blue-light</span>

<span class="cs-yellow">cs-yellow</span>

<span class="cs-yellow-light">cs-yellow-light</span>

== Columns: use-2-columns, use-3-columns ==

=== Text use-2-columns ===

<div class="use-2-columns">
<div>Column1 text Column1 text Column1 text Column1 text Column1 text Column1 text Column1 text Column1 text Column1 text Column1 text</div>
<div>Column2 text Column2 text Column2 text Column2 text Column2 text Column2 text Column2 text Column2 text Column2 text Column2 text</div>
</div>

=== List use-3-columns ===
<div class="use-3-columns">
<ul>
<li>List element 1</li>
<li><span class="keep-together">List element 2</span></li>
<li><span class="keep-together">List element 3</span></li>
<li><span class="keep-together">List element 4</span></li>
<li><span class="keep-together">List element 5</span></li>
<li><span class="keep-together">List element 6</span></li>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>

== hide-enlarge and thumb-hide-enlarge class ==

Original file

[[File:Swift 128.png|thumb|100px|SWIFT]]

File:Swift 128.png|thumb|100px|link=|SWIFT, wrapped in div.thumb-hide-enlarge

<div class="thumb-hide-enlarge">[[File:Swift 128.png|thumb|100px|link=|SWIFT]]</div>

File:Swift 128.png|thumb|100px|link=|class=hide-enlarge|SWIF

[[File:Swift 128.png|thumb|100px|link=|class=hide-enlarge|SWIFT]]

<div class="vspacer-10"></div>

== NoJS classes ==
=== Introduction ===
Description is in black. The test cases are in red

=== Only visible for noJS ===

<div class="show-for-nojs-only cs-red">Only visible for nojs</div>

Done.

=== Only visible for JS ===

<div class="show-for-js-only cs-red">Only visible for js</div>

Done.

=== Hide for noJS only ===

<div class="hide-for-nojs-only cs-red">Hide for nojs only</div>

Done.

=== Hide for JS only ===

<div class="hide-for-js-only cs-red">Hide for js only</div>

Done.

= Mixed =

== External Link Test==
https://www.whonix.org

[https://www.whonix.org homepage]

== FontAwesome Deprecated Test ==
Currently not using this method. Expected to fail.

<pre>
<i class="fa fa-eercast" aria-hidden="true"></i>
</pre>

<pre>
Test START
</pre>

<i class="fa fa-eercast" aria-hidden="true"></i>

<pre>
Test END
</pre>

== HTML Symbol ==
<pre>
&#10077;
</pre>

&#10077;

== Lists Tests ==

=== Unordered List Test ===

* one
* two
* three

=== Ordered Lists Test ===

# first
# second
# third

== overlength tag test ==

pre tag

<pre>
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>

{{CodeSelect|code=
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

<code>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>

== pre and div.pre tests ==

=== pre test ===

The following two lines <code>test1</code> and <code>test2</code> are separate pre tags lines. These should be visually separate. Currently functional.

<pre>
text 1
</pre>

<pre>
text 2
</pre>

=== div.pre ===

Pre without parsing

<pre>
This is current year

{{CURRENTYEAR}}
</pre>

Div.pre with parsing

<div class="pre">
This is current year

{{CURRENTYEAR}}
</div>

== Variables ==
* <code>SITENAME</code>: <code>{{SITENAME}}</code>
* <code>SERVER</code>: <code>{{SERVER}}</code>
* <code>SERVERNAME</code>: <code>{{SERVERNAME}}</code>
* <code>fullurl:page_name</code>: <code>{{fullurl:page_name}}</code>
* <code>canonicalurl:FULLPAGENAME</code>: {{canonicalurl:{{FULLPAGENAME}}}}
* [{{canonicalurl:{{FULLPAGENAME}}|action=history&feed=atom}} atom feed]
* <code>FULLPAGENAME</code>: {{FULLPAGENAME}}
* <code>NAMESPACE</code>: {{NAMESPACE}}

= H1 =

Test text

== H2 ==

Test text

=== H3 ===

Test text

==== H4 ====

Test text

===== H5 =====

Test text

====== H6 ======

Test text

= Tables on Mobile =
Check for example [[Reasons_for_Freedom_Software]] for word wrap issues.

TODO: add test here

= Footnotes =
[[Category:MultiWiki]]
[[Category:Development]]
{{footer}}