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
70 lines
1.7 KiB
HTML
70 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Test: 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="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-wrap-property">
|
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
|
<link rel="match" href="multi-line-wrap-reverse-column-reverse-ref.html">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<meta name="assert" content="This test check that a flex container reverse-wraps blocks multiline in column-reverse direction.">
|
|
<style>
|
|
* { margin:0; padding:0; font-size:100%; line-height:1; font-family: Ahem; }
|
|
|
|
#test {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
flex-wrap: wrap-reverse;
|
|
height: 300px;
|
|
}
|
|
|
|
p {
|
|
margin-top: 10px;
|
|
margin-right: 10px;
|
|
background: #ccc;
|
|
}
|
|
|
|
#col1-row1 {
|
|
height: 90px;
|
|
color: orange;
|
|
}
|
|
|
|
#col1-row2 {
|
|
height: 90px;
|
|
color: green;
|
|
}
|
|
|
|
#col1-row3 {
|
|
height: 90px;
|
|
color: blue;
|
|
}
|
|
|
|
#col2-row1 {
|
|
height: 140px;
|
|
color: yellow;
|
|
}
|
|
|
|
#col2-row2 {
|
|
height: 140px;
|
|
color: magenta;
|
|
}
|
|
|
|
#col3-row1 {
|
|
height: 290px;
|
|
color: cyan;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="test">
|
|
<p id="col3-row1">3-1</p>
|
|
<p id="col2-row2">2-2</p>
|
|
<p id="col2-row1">2-1</p>
|
|
<p id="col1-row3">1-3</p>
|
|
<p id="col1-row2">1-2</p>
|
|
<p id="col1-row1">1-1</p>
|
|
</div>
|
|
</body>
|
|
</html>
|