221 lines
6.6 KiB
HTML
221 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
line-height: 20px;
|
|
}
|
|
|
|
.grid-first-letter::first-letter {
|
|
line-height: 100px;
|
|
color: red;
|
|
}
|
|
|
|
.container-first-letter::first-letter {
|
|
line-height: 200px;
|
|
color: green;
|
|
}
|
|
|
|
.float {
|
|
float: left;
|
|
}
|
|
|
|
.grid-before::before {
|
|
content: "Anonymous item.";
|
|
display: grid;
|
|
}
|
|
|
|
.grid-after::before {
|
|
content: "Anonymous item.";
|
|
display: grid;
|
|
}
|
|
|
|
.inline-grid-before::before {
|
|
content: "Anonymous item.";
|
|
display: inline-grid;
|
|
}
|
|
|
|
.inline-grid-after::before {
|
|
content: "Anonymous item.";
|
|
display: inline-grid;
|
|
}
|
|
|
|
.before-after-first-letter::first-letter {
|
|
line-height: 50px;
|
|
color: blue;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<body onload="checkLayout('.container');">
|
|
<p>This test grid item should ignore grid container's first-letter pseudo-element.</p>
|
|
|
|
<div class="container">
|
|
<div class="grid grid-first-letter">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="inline-grid grid-first-letter">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="grid grid-first-letter" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="inline-grid grid-first-letter" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid grid-first-letter">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid grid-first-letter">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid grid-first-letter float">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid grid-first-letter float">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid grid-first-letter" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid grid-first-letter" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
<div data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid float">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid float">
|
|
<div class="item" data-expected-height=20>The first item.</div>
|
|
<div class="item" data-expected-height=20>The second item.</div>
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
<div data-expected-height=200>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid" data-expected-height=20>
|
|
Anonymous item.
|
|
</div>
|
|
<div data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid-before" data-expected-height=220>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid-before before-after-first-letter" data-expected-height=70>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid-after" data-expected-height=220>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="grid-after before-after-first-letter" data-expected-height=70>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid-before" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid-before before-after-first-letter" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid-after" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container container-first-letter">
|
|
<div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="inline-grid-after before-after-first-letter" data-expected-height=20>Out of grid.</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|