Template:Bar box/testcases

This is the template test cases page for the sandbox of Template:Bar box. Purge this page to update the examples.
If there are many examples of a complicated template, later ones may break due to limits in MediaWiki; see the HTML comment "NewPP limit report" in the rendered page.
You can also use Special:ExpandTemplates to examine the results of template uses.
You can test how this page looks in the different skins and parsers with these links:

Test 1

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=right |title=Quantity of stuff |titlebar=#DDD}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 2

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=left |title=Quantity of stuff |titlebar=#DDD}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 3

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=none |title=Quantity of stuff |titlebar=#DDD}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 4

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=center |title=Quantity of stuff |titlebar=#DDD}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 5

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=right |title=Quantity of stuff |titlebar=#DDD |width=200px}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 6

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=left |title=Quantity of stuff |titlebar=#DDD |width=200px}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 7

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=none |title=Quantity of stuff |titlebar=#DDD |width=200px}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 8

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |float=center |title=Quantity of stuff |titlebar=#DDD |width=200px}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Test 9

‹ The template below (Test case) is being considered for merging. See templates for discussion to help reach a consensus. ›

{{Bar box|bars=<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">foo</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:red; width:30%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">30%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bar</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:green; width:40%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">40%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">baz</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:blue; width:20%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">20%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:orange; width:8%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">8%</td>

</tr>
<tr>
<td colspan="2" style="padding-left: 0.4em; padding-right: 0.4em; min-width: 8em;">bla</td>
<td style="width: 100px; border-left: solid 1px silver; border-right: solid 1px silver;"><div style="background:teal; width:2%; overflow: hidden;">&thinsp;</div></td>
<td colspan="2" style="padding-left: 1.2em; padding-right: 0.4em; text-align: right;">1/50</td>

</tr> |title=Quantity of stuff |titlebar=#DDD |width=200px}}

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50

Quantity of stuff

foo			30%
bar			40%
baz			20%
bla			8%
bla			1/50