wpt/css/css-ui/box-sizing-005.html at master · web-platform-tests/wpt · GitHub

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
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.6.4</title>
<link rel="author" title="Florian Rivoal" href="https://umn6ec8mwazx69pkwjkbfgr9.julianrbryant.com/">
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-ui-3/#box-sizing">
<link rel="help" href="https://umn0mtkzgkj46tygt32g.julianrbryant.com/TR/CSS21/visudet.html#abs-non-replaced-height">
<link rel="match" href="reference/box-sizing-001-ref.html">
<meta name="assert" content="When box-sizing is border-box, the content height, rather than the computed value of the height property,
                             should be used in the constraint that determines the used values of sizing and positioning properties
			     of absolutely positioned elements.">
<style>
#cb {
	position: absolute;
	width: 100px;
	height: 100px;
}
#test {
	position:absolute;
	box-sizing: border-box;
	margin-right: 5px;
	margin-left: 25px;
	margin-bottom: 5px;
	margin-top: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.6.4 */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 25px;
	padding-bottom: 25px;
	width: 70px;
	height: 70px;
	background:green;
}
</style>
<body>
  <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
  <div id="cb">
	  <div id="test"></div>
  </div>
</body>