mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
107 lines
No EOL
2.3 KiB
HTML
107 lines
No EOL
2.3 KiB
HTML
<!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 Grid Layout: display: grid</title>
|
|
<link href="mailto:swainet@126.com" rel="author" title="swain" />
|
|
<link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen" /> <!-- 2013-09-17 -->
|
|
<link href="http://www.w3.org/TR/css-grid-1/#grid-containers" rel="help" />
|
|
<link href="reference/display-grid-ref.xht" rel="match" />
|
|
<meta content="'display: grid' causes an element to generate a block-level grid container box." name="assert" />
|
|
<style type="text/css">
|
|
#container {
|
|
position:relative;
|
|
width:400px;
|
|
height:100px;
|
|
}
|
|
|
|
#grid {
|
|
display:grid;
|
|
grid-template-columns:100px 300px;
|
|
grid-template-rows:70px 30px;
|
|
height:100%;
|
|
}
|
|
|
|
#cell1 {
|
|
grid-column:1;
|
|
grid-row:1;
|
|
background-color:green;
|
|
height:70px;
|
|
}
|
|
|
|
#cell2 {
|
|
grid-column:2;
|
|
grid-row:1;
|
|
background-color:limegreen;
|
|
height:70px;
|
|
}
|
|
|
|
#cell3 {
|
|
grid-column:1;
|
|
grid-row:2;
|
|
background-color:limegreen;
|
|
height:30px;
|
|
}
|
|
|
|
#cell4 {
|
|
grid-column:2;
|
|
grid-row:2;
|
|
background-color:green;
|
|
height:30px;
|
|
}
|
|
|
|
.error {
|
|
position:absolute;
|
|
top:0;
|
|
left:0;
|
|
height:100%;
|
|
width:100%;
|
|
z-index:-1;
|
|
}
|
|
|
|
#table {
|
|
width:100%;
|
|
height:100%;
|
|
border-collapse:collapse;
|
|
}
|
|
|
|
#table td {
|
|
padding:0;
|
|
vertical-align:top;
|
|
}
|
|
|
|
#table td:first-child {
|
|
width:100px;
|
|
}
|
|
|
|
#table tr:last-child td {
|
|
height:30px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test passes if there are 4 green rectangles and no red.</p>
|
|
|
|
<div id="container">
|
|
<div id="grid">
|
|
<div id="cell1">cell1</div>
|
|
<div id="cell2">cell2</div>
|
|
<div id="cell3">cell3</div>
|
|
<div id="cell4">cell4</div>
|
|
</div>
|
|
<div class="error">
|
|
<table id="table">
|
|
<tbody>
|
|
<tr>
|
|
<td style="background-color:#f00">cell1</td>
|
|
<td style="background-color:#e00">cell2</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="background-color:#e00">cell3</td>
|
|
<td style="background-color:#f00">cell4</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body></html> |