Template:CSS image crop/testcases

Location

Left

{{CSS image crop|Alt=Drop of dew on grass (focus on the drop) |Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |Location=left |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

{{CSS image crop|Align=left |Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

Right

{{CSS image crop|Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |Location=right |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

{{CSS image crop|Align=right |Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

Center

{{CSS image crop|Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |Location=centre |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

{{CSS image crop|Align=centre |Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

None

{{CSS image crop|Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |Location=none |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

{{CSS image crop|Align=none |Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

(No location)

{{CSS image crop|Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

(No location), no bSize

{{CSS image crop|Description=A drop of dew on grass (focus on the drop) |Image=Dew on grass Luc Viatour.jpg |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A drop of dew on grass (focus on the drop)	A drop of dew on grass (focus on the drop)

No description

Left

{{CSS image crop|Image=Dew on grass Luc Viatour.jpg |Location=left |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

{{CSS image crop|Align=left |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

Right

{{CSS image crop|Image=Dew on grass Luc Viatour.jpg |Location=right |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

{{CSS image crop|Align=right |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

Center

{{CSS image crop|Image=Dew on grass Luc Viatour.jpg |Location=center |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

{{CSS image crop|Align=center |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

None

{{CSS image crop|Image=Dew on grass Luc Viatour.jpg |Location=none |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

{{CSS image crop|Align=none |Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

skin-invert

{{CSS image crop|Class=skin-invert |Image=Emblem of India.svg |Location=none |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

{{CSS image crop|Class=skin-invert |Description=A can of Wikipedia [[Alphabet pasta|alphabet soup]], like grandma used to make. |Image=Wikipedia Alphabet Soup.png |Location=right |bSize=400 |cHeight=350 |cWidth=225 |oLeft=85 |oTop=140}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
A can of Wikipedia alphabet soup, like grandma used to make.	A can of Wikipedia alphabet soup, like grandma used to make.

(No location)

{{CSS image crop|Image=Dew on grass Luc Viatour.jpg |bSize=400 |cHeight=100 |cWidth=100 |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

Annotated Image

{{CSS image crop|Description= |Image=Dew on grass Luc Viatour.jpg |ImageDiv=<div class="noresize thumb tnone" style="; ">
<div class="thumbinner" style="overflow:hidden;width:4002px;">
<div class="thumbimage" style=" overflow:hidden; position:relative; background-color:white;">
<div style=";left:0px; top:0px; width:4000px; position:absolute;"> [[File:Dew on grass Luc Viatour.jpg|4000px|alt=|Annotated image caption]]</div>
<div style="text-align:left; background-color:transparent;      line-height:110%;">

</div>
<div style="visibility:hidden">[[Image:Dew on grass Luc Viatour.jpg|4000px|frameless|class=noviewer|alt=]]</div>
</div>
<div class="thumbcaption"><div class="magnify">[[:File:Dew on grass Luc Viatour.jpg| ]]</div>Annotated image caption</div>
</div></div> |Location=none |bSize=400 |cHeight=100 |cWidth=100 |magnify-link=what |oLeft=60 |oTop=180}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}

Empty parameters

{{CSS image crop|Align=none |Description=No offset parameters |Image=Dew on grass Luc Viatour.jpg |bSize=300 |cHeight=200 |cWidth=200}}

Side by side comparison

{{CSS image crop}}	{{CSS image crop/sandbox}}
No offset parameters	No offset parameters