Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-03 04:30:10 +01:00
Code Issues Projects Releases Packages Wiki Activity

Implement basic support for display: inline-block.

Browse source 
This still needs a lot of work, but it covers the basic
cases and improves wikipedia while passing all existing tests.

Tweak reftest to deal with linux/travis black background.
This commit is contained in:
Glenn Watson 2014-09-11 15:43:56 +10:00
parent 20cde10e12
commit 98624c9576
11 changed files with 350 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/ref/basic.list
View file

@ -119,3 +119,6 @@ flaky_gpu,flaky_linux == acid2_noscroll.html acid2_ref_broken.html
== iframe/simple.html iframe/simple_ref.html
== iframe/multiple_external.html iframe/multiple_external_ref.html
== floated_generated_content_a.html floated_generated_content_b.html
== inline_block_margin_a.html inline_block_margin_ref.html
== inline_block_img_a.html inline_block_img_ref.html
== inline_block_baseline_a.html inline_block_baseline_ref.html

28
tests/ref/inline_block_baseline_a.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
font-family: 'ahem';
font-size: 400px;
line-height: 1;
margin: 0;
}
.test {
color: green;
display: inline-block;
font-size: 300px;
}
.cdef {
color: red;
}
</style>
</head>
<body>
<div class="cdef">X<span class="test">X</span></div>
</body>
</html>

32
tests/ref/inline_block_baseline_ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.d1 {
position: absolute;
width: 400px;
height: 400px;
}
.d2 {
position: absolute;
left: 400px;
top: 80px;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="d1 red"></div>
<div class="d2 green"></div>
</body>
</html>

36
tests/ref/inline_block_img_a.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
margin: 0;
padding: 0;
background-color: white;
}
.red {
color: red;
}
.green {
color: green;
}
.ib {
display: inline-block;
}
span {
font-family: ahem;
font-size: 100px;
}
.bg {
background-color: white;
position: absolute;
width: 100%;
height: 500px;
}
</style>
</head>
<body><div class="bg"><span class="red">X</span><img src="400x400_green.png"><span class="green ib">X</span></div></body>
</html>

47
tests/ref/inline_block_img_ref.html Normal file
View file

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.d1 {
position: absolute;
top: 320px;
width: 100px;
height: 100px;
}
.d2 {
position: absolute;
left: 500px;
top: 320px;
width: 100px;
height: 100px;
}
img {
position: absolute;
left: 100px;
}
.bg {
background-color: white;
position: absolute;
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div class="bg">
<div class="d1 red"></div>
<img src="400x400_green.png">
<div class="d2 green"></div>
</div>
</body>
</html>

28
tests/ref/inline_block_margin_a.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: 'ahem';
src: url(fonts/ahem/ahem.ttf);
}
body {
font-family: 'ahem';
font-size: 100px;
margin: 32px;
}
.ib {
display: inline-block;
}
.yellow {
color: #ff0;
}
.grey {
color: #eee;
}
</style>
</head>
<body>
<div class="grey">X<span class="yellow ib">X</span></div>
</body>
</html>

31
tests/ref/inline_block_margin_ref.html Normal file
View file

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.yellow {
background-color: #ff0;
}
.grey {
background-color: #eee;
}
.d1 {
position: absolute;
left: 32px;
top: 32px;
width: 100px;
height: 100px;
}
.d2 {
position: absolute;
left: 132px;
top: 32px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="d1 grey"></div>
<div class="d2 yellow"></div>
</body>
</html>