forked from mirrors/gecko-dev
176e978aa0
Automatic update from web-platform-tests Use Ahem font in multi-line-wrap-reverse-column-reverse.html (#23761) css-flexbox/flex-lines/multi-line-wrap-reverse-column-reverse.html: * Update the test to use the Ahem font, and rely on different font colors (instead of different glyps) to check that each box of the test is placed correctly. Export of: https://bugs.webkit.org/show_bug.cgi?id=212054 -- wpt-commits: b2d87a14271da903e5897779f623c74e8601f36e wpt-pr: 23761
74 lines
1.4 KiB
HTML
74 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test Reference: flex container multiline wrapping-reverse in column-reverse direction</title>
|
|
<link rel="author" title="tmtysk" href="mailto:tmtysk@gmail.com">
|
|
<link rel="reviewer" title="Tab Atkins" href="mailto:jackalmage@gmail.com">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
* { margin:0; padding:0; font-size:100%; line-height:1; font-family: Ahem; }
|
|
|
|
.test {
|
|
width: 300px;
|
|
float: left;
|
|
width: 33.3333%;
|
|
}
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
background: #ccc;
|
|
}
|
|
|
|
#row1-col1 {
|
|
height: 90px;
|
|
color: orange;
|
|
}
|
|
|
|
#row1-col2 {
|
|
height: 90px;
|
|
color: green;
|
|
}
|
|
|
|
#row1-col3 {
|
|
height: 90px;
|
|
color: blue;
|
|
}
|
|
|
|
#row2-col1 {
|
|
height: 140px;
|
|
color: yellow;
|
|
}
|
|
|
|
#row2-col2 {
|
|
height: 140px;
|
|
color: magenta;
|
|
}
|
|
|
|
#row3-col1 {
|
|
height: 290px;
|
|
color: cyan;
|
|
}
|
|
|
|
.clear {
|
|
clear: both;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test">
|
|
<p id="row1-col1">1-1</p>
|
|
<p id="row1-col2">1-2</p>
|
|
<p id="row1-col3">1-3</p>
|
|
</div>
|
|
<div class="test">
|
|
<p id="row2-col1">2-1</p>
|
|
<p id="row2-col2">2-2</p>
|
|
</div>
|
|
<div class="test">
|
|
<p id="row3-col1">3-1</p>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</body>
|
|
</html>
|