blob: 886ecec638e5eb781b8815b78e5a84904b887e2b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Absolutely positioned inline replaced element with 'margin-top', 'margin-bottom' and 'bottom' as 'auto'</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
<link rel="match" href="absolute-replaced-height-008-ref.xht" />
<meta name="flags" content="image" />
<meta name="assert" content="An absolutely positioned inline replaced element's used value of 'bottom', 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'." />
<style type="text/css">
#div1
{
border-top: solid black;
position: relative;
}
img
{
bottom: auto;
height: auto;
margin-bottom: auto;
margin-top: auto;
position: absolute;
top: 1in;
width: auto;
}
/*
"
The used value of 'height' is determined as for inline replaced elements.
If 'margin-top' or 'margin-bottom' is specified as 'auto'
its used value is determined by the rules below.
(...)
If 'height' and 'width' both have computed values
of 'auto' and the element also has an intrinsic height,
then that intrinsic height is the used value of 'height'.
(...)
If 'bottom' is 'auto', replace any 'auto' on 'margin-top'
or 'margin-bottom' with '0'.
If at this point there is only one 'auto' left,
solve the equation for that value.
"
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height
In this test, bottom will be -96px because the height of the
containing block is 0px.
*/
div div
{
background: blue;
height: 15px;
left: 15px;
position: relative;
top: 1in;
width: 15px;
}
</style>
</head>
<body>
<p>Test passes if there is a short blue bar and it does not touch the black line.</p>
<div id="div1">
<img alt="blue 15x15" src="support/blue15x15.png" />
<div></div>
</div>
</body>
</html>
|
