View source for Template:Code/testcases

{{template test cases notice}}
__NOTOC__
<div style="display:inline-block; max-width:49%; vertical-align:top;">
<h2>Live version</h2>
<small>[[Template:Code]]</small>

{{code|lang=html|class=generic-class|id=html-summary|style=font-size:120%;|
<html> <head> <title>...</title> </head> <body>...</body> </html>
}}

Most HTML elements are enclosed between a start tag and an end tag, such as {{code|lang=html|<p>...</p>}}. Some are not, such as {{code|lang=html|<br>}}.
</div>

<div style="display:inline-block; max-width:49%; vertical-align:top;">
<h2>Sandbox version</h2>
<small>[[Template:Code/sandbox]]</small>

{{code/sandbox|lang=html|class=generic-class|id=html-summary|style=font-size:120%;|
<html> <head> <title>...</title> </head> <body>...</body> </html>
}}

Most HTML elements are enclosed between a start tag and an end tag, such as {{code/sandbox|lang=html|<p>...</p>}}. Some are not, such as {{code/sandbox|lang=html|<br>}}.
</div>

== Testing sandbox version ==
=== Font Size ===
<div style="background:#EEEEEE;"><!--May highlight other differences.-->
Fontsize in FF:
; Plain
* Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

; {{tl|code}}
* {{code|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}

; {{tl|code/sandbox}}
* {{code/sandbox|Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}

;{{tag|code}}
* <code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</code>

;syntaxhighlight 
* <syntaxhighlight lang="text" inline>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</syntaxhighlight>

; font-family&#x3a;monospace; only
* <span style="font-family:monospace;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>

</div>

=== Markup behaviour ===

{| class="wikitable"
|+ 
|-
! !! <nowiki>plain</nowiki> !! <nowiki>''ABC''</nowiki> !! <nowiki><b>bold</b></nowiki> !! <nowiki><b>bold</b> lang=html</nowiki> !! <nowiki>{{mdash}}</nowiki> !! <nowiki>{{PAGENAME}}</nowiki>
|-
| <nowiki>{{code}}</nowiki> || {{code|plain}} || {{code|''ABC''}} || {{code|<b>bold</b>}} ||{{code|<b>bold</b>|html}} || {{code|{{mdash}}}} || {{code|{{PAGENAME}}}}
|-
| <nowiki>{{code/sandbox}}</nowiki> || {{code/sandbox|plain}} || {{code/sandbox|''ABC''}} || {{code/sandbox|<b>bold</b>}} || {{code/sandbox|<b>bold</b>|html}} || {{code/sandbox|{{mdash}}}} || {{code/sandbox|{{PAGENAME}}}}
|-
| &lt;syntaxhighlight inline&gt; || <syntaxhighlight inline>plain</syntaxhighlight> || <syntaxhighlight inline>''ABC''</syntaxhighlight> || <syntaxhighlight inline><b>bold</b></syntaxhighlight> || <syntaxhighlight inline lang="html"><b>bold</b></syntaxhighlight> || <syntaxhighlight inline>{{mdash}}</syntaxhighlight> || <syntaxhighlight inline>{{PAGENAME}}</syntaxhighlight>
|-
| &lt;code&gt;&lt;nowiki&gt; || <code><nowiki>plain</nowiki></code> || <code><nowiki>''ABC''</nowiki></code> || <code><nowiki><b>bold</b></nowiki></code> || <code lang="html"><nowiki><b>bold</b></nowiki></code> || <code><nowiki>{{mdash}}</nowiki></code> || <code><nowiki>{{PAGENAME}}</nowiki></code>
|-
| <nowiki><code></nowiki> || <code>plain</code> || <code>''ABC''</code> || <code><b>bold</b></code> || <code lang="html"><b>bold</b></code> ||  <code>{{mdash}}</code> || <code>{{PAGENAME}}</code>
|}

{| class="wikitable"
|+ 
|-
!
! &amp;ndash; 
! &amp;ndash; <br/>lang=something 
|-
| <nowiki>{{code}}</nowiki> 
|| {{code|&ndash;}} 
|| {{code|&ndash;|lang=something}} 
|-
| <nowiki>{{code/sandbox}}</nowiki> 
|| {{code/sandbox|&ndash;}} 
|| {{code/sandbox|&ndash;|lang=something}}
|-
| &lt;syntaxhighlight inline&gt; 
|| <syntaxhighlight inline>&ndash;</syntaxhighlight> 
|| <syntaxhighlight inline lang=something>&ndash;</syntaxhighlight>
|-
| &lt;code&gt;&lt;nowiki&gt; 
|| <code><nowiki>&ndash;</nowiki></code> 
|| <code lang=something><nowiki>&ndash;</nowiki></code> 
|-
| <nowiki><code></nowiki> 
|| <code>&ndash;</code> 
|| <code lang=something>&ndash;</code> 
|}

=== Misc tests===
<div style="background:#EEEEEE;">
;Sandbox code:
*Foo bar {{code/sandbox|fee fi fo fum}} baz quux.
*Foo bar {{code/sandbox|lang=html|<div id{{=}}"quux" class{{=}}"weasel-razor">blah blah blah</div>}} baz quux.
*Measure me: ! ! {{code/sandbox|! !}} ! !
Spaces between proportional and monospaced segments are (depending on browser) precisely or very close to precisely the same as the spaces between characters inside the monospaced segment (which are necessarily larger than those between characters in the proportional segments).

;Old code:
*Foo bar {{code|fee fi fo fum}} baz quux.
*Foo bar {{code|lang=html|<div id{{=}}"quux" class{{=}}"weasel-razor">blah blah blah</div>}} baz quux.
*Measure me: ! ! {{code|! !}} ! !
Spaces between proportional and monospaced segments are (depending on browser) farcically smaller than the spaces between characters inside the monospaced segment, making the content weird-looking and hard to parse.

;Comparisons:
Blow up your font size to twice normal or so, and get out a ruler.
*Measure me: ! ! {{kbd|! !}} ! !&nbsp;&nbsp;{{tlx|kbd}} (intentionally wider padding to match wider monospacing)
*Measure me: ! ! {{kbd|! !|spacing=n}} ! !&nbsp;&nbsp;{{tlx|kbd|spacing{{=}}n}}
*Measure me: ! ! {{samp|! !}} ! !&nbsp;&nbsp;{{tlx|samp}}
*Measure me: ! ! {{code/sandbox|! !}} ! !&nbsp;&nbsp;{{tlx|code/sandbox}}
*Measure me: ! ! {{code|! !}} ! !&nbsp;&nbsp;{{tlx|code}}
*Measure me: ! ! <code>! !</code> ! !&nbsp;&nbsp;{{tag|code|open}}

For cases where the padding left or right is undesirable, use {{para|l|n}} or {{para|r|n}} (or any other value, like 'no" or "0", with either parameter:

*Measure me: ! ! {{code/sandbox|! !|l=n}} ! !&nbsp;&nbsp;{{tlx|code/sandbox|l{{=}}n}}
*Measure me: ! ! {{code/sandbox|! !|r=n}} ! !&nbsp;&nbsp;{{tlx|code/sandbox|r{{=}}n}}
*Measure me: ! ! {{code/sandbox|! !|l=n|r=n}} ! !&nbsp;&nbsp;{{tlx|code/sandbox|l{{=}}n|r{{=}}n}}
*Measure me: ! ! {{code/sandbox|! !}} ! !&nbsp;&nbsp;{{tlx|code/sandbox}}
*Measure me: ! ! {{code|! !|l=n}} ! !&nbsp;&nbsp;{{tlx|code|l{{=}}n}}
*Measure me: ! ! {{code|! !|r=n}} ! !&nbsp;&nbsp;{{tlx|code|r{{=}}n}}
*Measure me: ! ! {{code|! !|l=n|r=n}} ! !&nbsp;&nbsp;{{tlx|code|l{{=}}n|r{{=}}n}}
*Measure me: ! ! {{code|! !}} ! !&nbsp;&nbsp;{{tlx|code}}
</div>

=== lang tests ===

; Test cases
* <code><nowiki>The declaration {{code |lang=cpp |int foo(const std::string& bar, const std::vector<long double*>& baz);}} is the prototype for a function defined later.</nowiki></code>
* <code><nowiki>If the code contains an [[equals sign]], such as {{code |lang=javascript |code=var img = document.getElementsByTagName("img");}}...</nowiki></code>
* <code><nowiki>The following is an example of a main method in Java: {{code | public static void main(string[] args){ System.out.println("Hello world!"); } | java}}</nowiki></code>

; <nowiki>{{code}}</nowiki>
* The declaration {{code |lang=cpp |int foo(const std::string& bar, const std::vector<long double*>& baz);}} is the prototype for a function defined later.
* If the code contains an [[equals sign]], such as {{code |lang=javascript |code=var img = document.getElementsByTagName("img");}}...
* The following is an example of a main method in Java: {{code | public static void main(string[] args){ System.out.println("Hello world!"); } | java}}

; <nowiki>{{code/sandbox}}</nowiki>
* The declaration {{code/sandbox  |lang=cpp |int foo(const std::string& bar, const std::vector<long double*>& baz);}} is the prototype for a function defined later.
* If the code contains an [[equals sign]], such as {{code/sandbox |lang=javascript |code=var img = document.getElementsByTagName("img");}}...
* The following is an example of a main method in Java: {{code/sandbox | public static void main(string[] args){ System.out.println("Hello world!"); } | java}}

</noinclude>