Template:Rule/testcases

Testing sandbox version

Example

{{Rule/sandbox}}

---

Example

{{Rule/sandbox|class=__uirule}}

---

Example

{{Rule/sandbox|50%}}

---

Example

{{Rule/sandbox|width=50%}}

---

Example

{{Rule/sandbox|height=1em}}

---

Example

{{Rule/sandbox|12em|1em}}

---

Example

{{Rule/sandbox|12em|align=center}}

---

Example

{{Rule/sandbox|8em}}

---

Example

{{Rule/sandbox|112px|align=left}}

---

Example

{{Rule/sandbox|6em|align=right}}

---

Example

{{Rule/sandbox|9em|align=center|style=background-color:darkcyan; color:gold;}}

---

Example

{{Rule/sandbox}}{{Rule/sandbox}}

---

---

Example

{{Rule/sandbox}}
{{Rule/sandbox}}

---

---

Example

{{Rule/sandbox|margin_tb=2em}}

---

Example

{{Rule/sandbox|color=red}}

---

Example

<div style="background-color:navy; color:white;">
Text
{{rule/sandbox}}
Text
</div>

Text

---

Text

Example

Text (rule below is mtb=2em)
{{rule/sandbox|mtb=2em}}
Text (rule below is mt=2em)
{{rule/sandbox|mt=2em}}
Text (rule below is mb=2em)
{{rule/sandbox|mb=2em}}
Text

Text (rule below is mtb=2em)

---

Text (rule below is mt=2em)

---

Text (rule below is mb=2em)

---

Text

Testing rules that are larger than the parent container

Example

<div style="border:1px solid red; width:350px; margin:auto;">
{{rule/sandbox|500px}}
</div>

---

Testing main template

Example

{{Rule}}

---

Example

{{Rule/sandbox|class=__uirule}}

---

Example

{{Rule|50%}}

---

Example

{{Rule|width=50%}}

---

Example

{{Rule|height=1em}}

---

Example

{{Rule|12em|1em}}

---

Example

{{Rule|12em|align=center}}

---

Example

{{Rule|8em}}

---

Example

{{Rule|112px|align=left}}

---

Example

{{Rule|6em|align=right}}

---

Example

{{Rule|9em|align=center|style=background-color:darkcyan; color:gold;}}

---

Example

{{Rule}}{{Rule}}

---

---

Example

{{Rule}}
{{Rule}}

---

---

Example

{{Rule|margin_tb=2em}}

---

Example

{{Rule|color=red}}

---

Example

<div style="background-color:navy; color:white;">
Text
{{rule}}
Text
</div>

Text

---

Text

Testing rules that are larger than the parent container

Example

<div style="border:1px solid red; width:350px; margin:auto;">
{{rule|500px}}
</div>

---

Notes

{{Rule|height=1em}}

{{Rule|height=16px}}

• conversion from pixels to em possible? using this formula: pixels/16=em
• differing? results depending on? browser, settings, block element, etc.

  weird.

• 1em is equal to the parent element's font size. If the parent element is the body, it's equal to the default browser size. To clarify: At this moment I am using a browser that has a default font size of 16px. The stylesheet used by Wikisource has the body font-size set at 0.8em. This means the default font size for any children is 0.8em or 0.8*browser default. In my case, it is now set to 12px. No children below this change the default size for 1em until you get to the rule tag above. But, wait! It doesn't change it. It's set to 1em. However, that means 1*default (which is 12px, set by the stylesheet for anything within the body tag). Also, no other parent of the rule (any of the divs that it's in) has changed the 1em to another default value.

{{Rule|height=1em}}

{{Rule|height=16px}}

{{Rule|0.2500em}}

---

{{Rule|4px}}

---

1px	0.0625em
2px	0.1250em
3px	0.1875em
4px	0.2500em
5px	0.3125em
6px	0.3750em
7px	0.4375em
8px	0.5000em
9px	0.5625em
10px	0.6250em
11px	0.6875em
12px	0.7500em
13px	0.8125em
14px	0.8750em
15px	0.9375em
16px	1.0000em