basic-textareas-quirks.html | Explore in Territory

<html><head><style>
div {
  border:1px solid red;
  width:350px;
  font-size:14px;
  line-height:14px;
}
.wrapper-div {
  float:left;
}
</style></head>
<body>

<div class='wrapper-div'>
Plain textarea with little content
<div>
A
<textarea>Lorem ipsum dolor</textarea>
B
</div>

Plain textarea
<div>
A
<textarea>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

Disabled textarea
<div>
A
<textarea DISABLED>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="padding:10px"
<div>
A
<textarea style="padding:10px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="padding:0px"
<div>
A
<textarea style="padding:0px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="margin:10px"
<div>
A
<textarea style="margin:10px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="margin:0px"
<div>
A
<textarea style="margin:0px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

cols=3
<div>
A
<textarea cols=3>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

rows=3
<div>
A
<textarea rows=3>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

cols=10
<div>
A
<textarea cols=10>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

rows=10
<div>
A
<textarea rows=10>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

cols=5 rows=4
<div>
A
<textarea cols=5 rows=4>Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

</div>
<div class='wrapper-div'>

style="width:60px"
<div>
A
<textarea style="width:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="width:60px;padding:20px"
<div>
A
<textarea style="width:60px;padding:20px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="width:60px;padding:0"
<div>
A
<textarea style="width:60px;padding:0">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="height:60px"
<div>
A
<textarea style="height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="width:60px;height:60px"
<div>
A
<textarea style="width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="overflow:hidden"
<div>
A
<textarea style="overflow:hidden">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="overflow:scroll"
<div>
A
<textarea style="overflow:scroll">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="overflow:hidden;width:60px;height:60px"
<div>
A
<textarea style="overflow:hidden;width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

style="overflow:scroll;width:60px;height:60px"
<div>
A
<textarea style="overflow:scroll;width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

cols=5 style="width:60px;height:60px"
<div>
A
<textarea cols=5 style="width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

rows=4 style="width:60px;height:60px"
<div>
A
<textarea rows=4 style="width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

cols=5 rows=4 style="width:60px;height:60px"
<div>
A
<textarea cols=5 rows=4 style="width:60px;height:60px">Lorem ipsum dolor ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuv </textarea>
B
</div>

wrap="off"
<div>
A
<textarea wrap="off"> 
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
</textarea> 
B
</div>

wrap="hard"
<div>
A
<textarea wrap="hard"> 
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
</textarea> 
B
</div>

wrap="soft"
<div>
A
<textarea wrap="soft"> 
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
This is a text area with wrap="soft"
</textarea> 
B
</div>
</div>
</body></html>
chromium/third_party/blink/web_tests/fast/forms/textarea/basic-textareas-quirks.html
