Commit b5a817a4 authored by darin's avatar darin

Moving layout tests in here.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@4740 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent c99e5054
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x183
RenderBlock {HTML} at (0,0) size 800x183
RenderBody {BODY} at (8,8) size 784x161
RenderBlock {P} at (0,0) size 784x161
RenderBlock (anonymous) at (2,2) size 780x16
RenderInline {I} at (0,0) size 226x16
RenderText {TEXT} at (0,0) size 92x16
text run at (0,0) width 92: "Start of a line. "
RenderInline {FONT} at (0,0) size 134x16 [color=#FF0000]
RenderText {TEXT} at (92,0) size 134x16
text run at (92,0) width 134: "More red on this line:"
RenderBlock (anonymous) at (2,34) size 780x59 [color=#FF0000]
RenderBlock {H3} at (0,0) size 780x18
RenderText {TEXT} at (0,0) size 203x18
text run at (0,0) width 203: "Suddenly a block appears!"
RenderBlock {H2} at (0,35) size 780x24
RenderText {TEXT} at (0,0) size 194x24
text run at (0,0) width 194: "And another block!"
RenderBlock (anonymous) at (2,110) size 780x49
RenderInline {I} at (0,0) size 291x32
RenderInline {FONT} at (0,0) size 96x32 [color=#FF0000]
RenderText {TEXT} at (0,0) size 96x16
text run at (0,0) width 96: "Now more text."
RenderBR {BR} at (0,0) size 0x0
RenderText {TEXT} at (0,16) size 66x16
text run at (0,16) width 66: "This is red"
RenderText {TEXT} at (66,16) size 225x16
text run at (66,16) width 225: " but now only italic on the same line"
RenderBR {BR} at (0,0) size 0x0
RenderText {TEXT} at (0,32) size 140x17
text run at (0,32) width 140: "Plain line at the end."
<p style="border:2px solid red">
<i>Start of a line. <font color=red>More red on this line:
<h3>Suddenly a block appears!</h3>
<h2>And another block!</h2>
Now more text.<br>
This is red</font> but now only italic on the same line</i><br>
Plain line at the end.
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x37
RenderBlock {HTML} at (0,0) size 800x37
RenderBody {BODY} at (8,8) size 784x21
RenderBlock {DIV} at (0,0) size 784x21
RenderInline {A} at (0,0) size 30x17 [color=#008000]
RenderText {TEXT} at (2,2) size 30x17
text run at (2,2) width 30: "First"
RenderInline {A} at (0,0) size 49x17 [color=#008000]
RenderText {TEXT} at (32,2) size 49x17
text run at (32,2) width 49: "Second"
RenderInline {A} at (0,0) size 37x17 [color=#008000]
RenderText {TEXT} at (81,2) size 37x17
text run at (81,2) width 37: "Third"
<head>
<style>
a { color: green; }
</style>
</head>
<body>
<script>
function toggle(id)
{
var node = document.getElementById(id);
node.style.display == 'none' ? node.style.display = 'block' : node.style.display = 'none';
}
</script>
<div style="border:2px solid red"><a onclick="toggle('first');">First</a><span id="first" style="display:none">
&nbsp;First Content.
</span><a onclick="toggle('second');">Second</a><span id="second" style="display:none">
&nbsp;Second Content.
</span><a onclick="toggle('third');">Third</a><span id="third" style="display:none">
&nbsp;Third Content.<a onclick="toggle('crashme');">&nbsp;Crash Me</a><span id="crashme" style="display:none">
&nbsp;&nbsp;You win!
</span></div>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x54
RenderBlock {HTML} at (0,0) size 800x54
RenderBody {BODY} at (8,8) size 784x38
RenderBlock {DIV} at (0,0) size 204x38
RenderText {TEXT} at (2,2) size 198x34
text run at (2,2) width 176: "This is some text. What is"
text run at (2,19) width 198: "going on here. Does it work?"
<html>
<body>
<div style="border:2px solid red; min-width: 200px; max-width:150px">
This is some text. What is going on here. Does it work?
</div>
</body>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x81
RenderBlock {HTML} at (0,0) size 800x81
RenderBody {BODY} at (8,14) size 784x59
RenderBlock {P} at (0,0) size 784x17
RenderText {TEXT} at (0,0) size 577x17
text run at (0,0) width 577: "The following two DIVs should be the same width (resulting in a single 4 by 2 block)."
RenderBlock {DIV} at (0,31) size 42x14 [bgcolor=#000080]
RenderBlock {DIV} at (0,0) size 56x14
RenderBlock {DIV} at (0,45) size 56x14 [bgcolor=#000080]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Block Box Model: overconstrained horizontal box model and minimum widths</title>
<style type="text/css">
.container { width: 3em; }
.test { margin-left: 0; border-left: 2em solid; padding-left: 0; width: auto; padding-right: 0; border-right: 2em solid; margin-right: 0; }
.control { margin-left: 0; border-left: none; padding-left: 0; width: 4em; padding-right: 0; border-right: none; margin-right: 0; }
div { background: navy; border-color: navy; height: 1em; }
</style>
</head>
<body>
<p>The following two DIVs should be the same width (resulting in a single 4 by 2 block).</p>
<div class="container">
<div class="test"></div>
</div>
<div class="control"></div>
</body>
</html>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x81
RenderBlock {HTML} at (0,0) size 800x81
RenderBody {BODY} at (8,14) size 784x59
RenderBlock {P} at (0,0) size 784x17
RenderText {TEXT} at (0,0) size 577x17
text run at (0,0) width 577: "The following two DIVs should be the same width (resulting in a single 4 by 2 block)."
RenderBlock {DIV} at (0,31) size 42x14 [bgcolor=#000080]
RenderBlock {DIV} at (0,0) size 56x14
RenderBlock {DIV} at (0,45) size 56x14 [bgcolor=#000080]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Block Box Model: overconstrained horizontal box model and minimum widths</title>
<style type="text/css">
.container { width: 3em; }
.test { margin-left: 0; border-left: none; padding-left: 2em; width: auto; padding-right: 2em; border-right: none; margin-right: 0; }
.control { margin-left: 0; border-left: none; padding-left: 0; width: 4em; padding-right: 0; border-right: none; margin-right: 0; }
div { background: navy; height: 1em; }
</style>
</head>
<body>
<p>The following two DIVs should be the same width (resulting in a single 4 by 2 block).</p>
<div class="container">
<div class="test"></div>
</div>
<div class="control"></div>
</body>
</html>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x109
RenderBlock {HTML} at (0,0) size 800x109
RenderBody {BODY} at (8,14) size 784x87
RenderBlock {P} at (0,0) size 784x17
RenderText {TEXT} at (0,0) size 503x17
text run at (0,0) width 503: "The following two vertical bars should be at the same horizontal position."
RenderBlock {DIV} at (0,31) size 72x28
RenderBlock {DIV} at (48,0) size 0x28
RenderInline {SPAN} at (0,0) size 9x28
RenderText {TEXT} at (0,0) size 9x28
text run at (0,0) width 9: "|"
RenderBlock {DIV} at (0,59) size 784x28
RenderInline {SPAN} at (0,0) size 9x28
RenderText {TEXT} at (48,0) size 9x28
text run at (48,0) width 9: "|"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Block Box Model: overconstrained horizontal box model and minimum widths</title>
<style type="text/css">
.container { width: 3em; }
.test { margin-left: 2em; border-left: none; padding-left: 0; width: auto; padding-right: 0; border-right: none; margin-right: 2em; }
.control { padding-left: 2em; }
div { font-size: xx-large; }
</style>
</head>
<body>
<p>The following two vertical bars should be at the same horizontal position.</p>
<div class="container">
<div class="test"><span>|</span></div>
</div>
<div class="control"><span>|</span></div>
</body>
</html>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x81
RenderBlock {HTML} at (0,0) size 800x81
RenderBody {BODY} at (8,14) size 784x59
RenderBlock {P} at (0,0) size 784x17
RenderText {TEXT} at (0,0) size 577x17
text run at (0,0) width 577: "The following two DIVs should be the same width (resulting in a single 5 by 2 block)."
RenderBlock {DIV} at (0,31) size 70x14 [bgcolor=#000080]
RenderBlock {DIV} at (0,0) size 70x14
RenderBlock {DIV} at (0,45) size 70x14 [bgcolor=#000080]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Block Box Model: sane horizontal box model and minimum widths</title>
<style type="text/css">
.container { width: 5em; }
.test { margin-left: 0; border-left: 2em solid; padding-left: 0; width: auto; padding-right: 0; border-right: 2em solid; margin-right: 0; }
.control { margin-left: 0; border-left: none; padding-left: 0; width: 5em; padding-right: 0; border-right: none; margin-right: 0; }
div { background: navy; border-color: navy; height: 1em; }
</style>
</head>
<body>
<p>The following two DIVs should be the same width (resulting in a single 5 by 2 block).</p>
<div class="container">
<div class="test"></div>
</div>
<div class="control"></div>
</body>
</html>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x81
RenderBlock {HTML} at (0,0) size 800x81
RenderBody {BODY} at (8,14) size 784x59
RenderBlock {P} at (0,0) size 784x17
RenderText {TEXT} at (0,0) size 577x17
text run at (0,0) width 577: "The following two DIVs should be the same width (resulting in a single 5 by 2 block)."
RenderBlock {DIV} at (0,31) size 70x14 [bgcolor=#000080]
RenderBlock {DIV} at (0,0) size 70x14
RenderBlock {DIV} at (0,45) size 70x14 [bgcolor=#000080]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="en">
<head>
<title>CSS Block Box Model: sane horizontal box model and minimum widths</title>
<style type="text/css">
.container { width: 5em; }
.test { margin-left: 0; border-left: none; padding-left: 2em; width: auto; padding-right: 2em; border-right: none; margin-right: 0; }
.control { margin-left: 0; border-left: none; padding-left: 0; width: 5em; padding-right: 0; border-right: none; margin-right: 0; }
div { background: navy; height: 1em; }
</style>
</head>
<body>
<p>The following two DIVs should be the same width (resulting in a single 5 by 2 block).</p>
<div class="container">
<div class="test"></div>
</div>
<div class="control"></div>
</body>
</html>
layer at (0,0) size 800x600
RenderCanvas at (0,0) size 800x600
layer at (0,0) size 800x109
RenderBlock {HTML} at (0,0) size 800x109