diff options
Diffstat (limited to 'tests/wpt/tests/css/css-overflow')
10 files changed, 284 insertions, 0 deletions
diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-028.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-028.tentative.html new file mode 100644 index 00000000000..b8fa48025b6 --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-028.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: sizing of line-clamp elements with ruby annotations</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-028-ref.html"> +<meta name="assert" content="The sizing of a line-clamp element should be exactly as if it had no content after clamp, even if there are ruby annotations involved."> +<style> +.clamp { + line-clamp: 3; + font-size: 16px / 16px serif; + white-space: pre-wrap; + background-color: yellow; + padding-bottom: 1em; +} +ruby.under { + ruby-position: under; +} +.large { + font-size: 3em; +} +</style> +<div class="clamp">Line 1 +Line 2 +<ruby class="under">Line 3<rt>ruby</ruby> +<ruby>Line 4<rt class="large">ruby</ruby> +Line 5 +<ruby class="under">Line 6<rt class="large">ruby</ruby></div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-001.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-001.tentative.html new file mode 100644 index 00000000000..5f69cc1b71e --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-001.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp: auto` with ruby</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-auto-with-ruby-001-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="The last line before clamp should have an ellipsis when it has line-over ruby."> +<style> +.clamp { + line-clamp: auto; + max-height: 6lh; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby> +Line 6</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-002.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-002.tentative.html new file mode 100644 index 00000000000..62fe4814bda --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-002.tentative.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp: auto` with ruby</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="A line-over ellipsis on the first line after clamp should not show through the previous line's leading."> +<style> +.clamp { + line-clamp: auto; + max-height: 4lh; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +rt { + font: 16px / 32px Ahem; + color: red; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby> +Line 6</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-003.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-003.tentative.html new file mode 100644 index 00000000000..4a3b83093dd --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-003.tentative.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp: auto` with ruby</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-auto-with-ruby-003-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="If the last line before clamp has line-under ruby, it should have an ellipsis, and the line-clamp container should be sized the same as a new BFC that had such a ruby at the end."> +<style> +.clamp { + line-clamp: auto; + max-height: 6lh; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +ruby { + ruby-position: under; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby> +Line 6</div> + +<p>Following content.</p> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-004.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-004.tentative.html new file mode 100644 index 00000000000..6b93203de4d --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-004.tentative.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp: auto` with ruby</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/webkit-line-clamp-005-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="If a line-under ruby increases the bottom leading of what would be the last line before clamp so that it does not fully fit within the height, the clamp point will be set before that line."> +<style> +.clamp { + line-clamp: auto; + max-height: 5lh; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +ruby { + ruby-position: under; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby> +Line 6</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-005.tentative.html b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-005.tentative.html new file mode 100644 index 00000000000..af2a19d6fb0 --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/line-clamp-auto-with-ruby-005.tentative.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: `line-clamp: auto` with ruby</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp"> +<link rel="match" href="reference/line-clamp-auto-with-ruby-005-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<meta name="assert" content="If a line-under ruby would increase the bottom leading of what would be the last line before clamp so that it does not fully fit within the height, but instead the ruby annotation space eats into the box's bottom padding, then the clamp point will be set after that line."> +<style> +.clamp { + line-clamp: auto; + max-height: 5lh; + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; + + /* With the Ahem font, the text is 16px = .5lh tall. Without ruby, the leading + * would be evenly distributed, so the bottom leading would be .25lh. Since + * the ruby annotation is 1lh tall, we need .75lh of padding to completely + * contain it. */ + padding-bottom: .75lh; +} +ruby { + font-family: Ahem; + ruby-position: under; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby> +Line 6</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-028-ref.html b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-028-ref.html new file mode 100644 index 00000000000..21ec61f5c77 --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-028-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.clamp { + font-size: 16px / 16px serif; + white-space: pre-wrap; + background-color: yellow; + padding-bottom: 1em; +} +ruby.under { + ruby-position: under; +} +</style> +<div class="clamp">Line 1 +Line 2 +<ruby class="under">Line 3<rt>ruby</ruby>…</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-001-ref.html b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-001-ref.html new file mode 100644 index 00000000000..03d12b9c722 --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby>…</div> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-003-ref.html b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-003-ref.html new file mode 100644 index 00000000000..0b6a569dc8e --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-003-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; +} +ruby { + ruby-position: under; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby>…</div> + +<p>Following content.</p> diff --git a/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-005-ref.html b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-005-ref.html new file mode 100644 index 00000000000..dca5f1b120c --- /dev/null +++ b/tests/wpt/tests/css/css-overflow/line-clamp/reference/line-clamp-auto-with-ruby-005-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.clamp { + font: 16px / 32px serif; + white-space: pre; + background-color: yellow; + padding: 0 4px; + padding-bottom: .75lh; +} +ruby { + font-family: Ahem; + ruby-position: under; +} +rt { + font: 32px / 32px Ahem; + color: blue; +} +</style> + +<div class="clamp">Line 1 +Line 2 +Line 3 +Line 4 +<ruby>Line 5<rt>X</ruby>…</div> |