Update web-platform-tests to revision e426a6933a05bf144eba06a1d4c47ba876a4e2d1

This commit is contained in:
WPT Sync Bot 2019-05-22 10:24:35 +00:00
parent 415b26e4f1
commit 5e5eccabf8
495 changed files with 14920 additions and 784 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>