-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Expand file tree
/
Copy pathdisplay-first-line-001.html
More file actions
27 lines (27 loc) · 1.12 KB
/
display-first-line-001.html
File metadata and controls
27 lines (27 loc) · 1.12 KB
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
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Display: first-line pseudo-element</title>
<link rel="help" href="https://www.w3.org/TR/css-display-3/#placement">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#t1::first-line { float: left; display: flex; font-size: 30px }
#t2::first-line { float: left; font-size: 30px }
#t3::first-line { display: flex; font-size: 30px }
#t4::first-line { font-size: 30px }
</style>
<div id="t1">First line is float and flex.</div>
<div id="t2">First line is float but not flex.</div>
<div id="t3">First line is flex but not float.</div>
<div id="t4">First line is not float or flex.</div>
<script>
function getFirstLineDisplayFor(id) {
return window.getComputedStyle(document.getElementById(id), "::first-line").display;
}
test(function() {
assert_equals(getFirstLineDisplayFor("t1"), "inline");
assert_equals(getFirstLineDisplayFor("t2"), "inline");
assert_equals(getFirstLineDisplayFor("t3"), "inline");
assert_equals(getFirstLineDisplayFor("t4"), "inline");
}, "display of first-line");
</script>