mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
Update web-platform-tests to revision e426a6933a05bf144eba06a1d4c47ba876a4e2d1
This commit is contained in:
WPT Sync Bot
parent
415b26e4f1
commit
5e5eccabf8
495 changed files with 14920 additions and 784 deletions
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: parsing -webkit-line-clamp with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp">
|
||||
<meta name="assert" content="-webkit-line-clamp supports only the grammar 'none | <integer>'.">
|
||||
<meta name="assert" content="Zero or negative max-lines integers are invalid.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("-webkit-line-clamp", 'auto');
|
||||
|
||||
test_invalid_value("-webkit-line-clamp", '0');
|
||||
test_invalid_value("-webkit-line-clamp", '-5');
|
||||
|
||||
test_invalid_value("-webkit-line-clamp", 'none "~"');
|
||||
test_invalid_value("-webkit-line-clamp", '1 "~"');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: parsing -webkit-line-clamp with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp">
|
||||
<meta name="assert" content="-webkit-line-clamp supports the full grammar 'none | <integer>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("-webkit-line-clamp", 'none');
|
||||
|
||||
test_valid_value("-webkit-line-clamp", '1');
|
||||
test_valid_value("-webkit-line-clamp", '6');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2…</div><div>Line A
|
||||
Line B…</div>Line 一
|
||||
Line 二…</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3…</div></div></div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
padding: 0 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
display: flex;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<table class="child" border="1"><tr><td>Line 3
|
||||
Line 4</td></tr></table>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2…</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 4px 0;
|
||||
background-color: yellow;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2…</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
Before <div class="clamp">Line 1
|
||||
Line 2
|
||||
Line …</div> After</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
width: 11ch;
|
||||
}
|
||||
.float {
|
||||
float: right;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div><div class="float">[f]</div>A B C D…</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<fieldset>Line 3
|
||||
Line 4<legend>Line 5
|
||||
Line 6</legend></fieldset>Line 7…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.big {
|
||||
font-weight: bold;
|
||||
border-top: 2px solid blue;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="item">Line 1
|
||||
Line 2
|
||||
Line 3 <span class="big">BIG</span>…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
…</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp when not display:-webkit-box</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to an element that is not a flex item for a legacy -webkit-box or -webkit-inline-box flex container.">
|
||||
<style>
|
||||
.clamp {
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp when not -webkit-box-orient:vertical</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to an element whose parent is not -webkit-box-orient:vertical.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with fewer lines than specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with fewer lines than specified.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with exactly as many lines as specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with exactly as many lines as specified.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with more lines than specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should clamp to the specified number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
padding: 0 4px;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: sizing of -webkit-line-clamp affected elements</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-006-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should size the element to the clamped number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp applied to a non-anonymous flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-007-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to a flex item in a -webkit-box or -webkit-inline-box flex container.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp applied to all flex items</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-008-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to all flex items in a -webkit-box or -webkit-inline-box flex container independently.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3</div><div>Line A
|
||||
Line B
|
||||
Line C</div>Line 一
|
||||
Line 二
|
||||
Line 三</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-009-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div></div></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-010-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with BFC child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-011-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in BFC children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
overflow: auto;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
padding: 0 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with flex container child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-012-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
display: flex;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with table child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-013-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<table class="child" border="1"><tr><td>Line 3
|
||||
Line 4</td></tr></table>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp on RTL flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-014-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should place the ellipsis appropriately in RTL content.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp on vertical writing mode flex item when -webkit-box-orient:horizontal</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-015-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to a -webkit-box-orient:horizontal flex item even if using a vertical writing mode.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 4px 0;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp value on flex child</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-016-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp value on the flex child should be ignored.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-017-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from none to a number less than the number of lines should apply the clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = 3;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-018-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number to none remove the clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = "none";
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-019-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number less than to a number greater than the number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = 6;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-020-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number greater than to a number less than the number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = 3;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-021-ref.html">
|
||||
<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it exceeds the specified number of lines should start clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").textContent = `Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5`;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-022-ref.html">
|
||||
<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it no longer exceeds the specified number of lines should stop clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").textContent = `Line 1
|
||||
Line 2`;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing contents of a -webkit-line-clamp affected element</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-023-ref.html">
|
||||
<meta name="assert" content="Dynamically changing contents of a -webkit-line-clamp element so that it matches the specified number of lines should stop clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").textContent = `Line 1
|
||||
Line 2
|
||||
Line 3`;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp on a display:-webkit-inline-box container</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-024-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to display:-webkit-inline-box containers.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
Before <div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div> After</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with floats</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-025-ref.html">
|
||||
<meta name="assert" content="A -webkit-line-clamp induced ellipsis is placed after shrinking the line due to floats.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
width: 11ch;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.float {
|
||||
float: right;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div><div class="float">[f]</div>A B C D
|
||||
E F G H</div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-box-orient when -webkit-line-clamp applies</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-026-ref.html">
|
||||
<meta name="assert" content="Dynamically changing a -webkit-line-clamp affected element to be -webkit-box-orient:horizontal should cause the line clamp to be removed.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
document.body.offsetTop;
|
||||
document.querySelector(".clamp").style.webkitBoxOrient = "horizontal";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp and fieldset</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-027-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip over fieldsets.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<fieldset>Line 3
|
||||
Line 4<legend>Line 5
|
||||
Line 6</legend></fieldset>Line 7
|
||||
Line 8</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp and scrollable items</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-029-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to flex items that are scrollable.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp and scrollable container</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-030-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to flex items when the container is scrollable.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp and a line with inlines of different heights</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-031-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should clamp to the bottom of the line box.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.big {
|
||||
font-weight: bold;
|
||||
border-top: 2px solid blue;
|
||||
border-bottom: 2px solid blue;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3 <span class="big">BIG</span>
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with an ellipsis on a blank line</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-032-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should render an ellipsis on a blank line.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with an empty line</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="about:blank">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
padding: 0 4px;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div><span></span></div></div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue