Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[LayoutNG] Add tests for text-overflow: ellipsis with scrolling
These set of tests pass in Firefox but not in Chromium. They check what happens when you scroll an element with "text-overflow: ellipsis", right now in Chromium the rest of the content of the element is not visible at all (once truncated the text ellipsis is not moved). The solution would be to force a relayout during scrolling but it seems we prefer to keep current behavior to avoid performance issues on scrolling. The behavior is not mandatory according Both behaviors are allowed in the spec, so the tests are marked with the "should" flag: https://drafts.csswg.org/css-overflow/#ellipsis-scrolling Bug=745905 TEST=external/wpt/css/css-overflow/text-overflow-scroll-001.html TEST=external/wpt/css/css-overflow/text-overflow-scroll-rtl-001.html TEST=external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-001.html TEST=external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html TEST=external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-001.html TEST=external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html Change-Id: I975ca86dbdfedf92875c08736539fb2f33f68c54 Bug: 745905 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2113495 Commit-Queue: Koji Ishii <kojii@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#753508}
- Loading branch information
1 parent
fe002e7
commit 86103a7
Showing
10 changed files
with
300 additions
and
0 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
css/css-overflow/reference/text-overflow-scroll-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
} | ||
</style> | ||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div>p pX</div> | ||
<div>pp p</div> | ||
<div> pX</div> | ||
<div>pp p</div> |
16 changes: 16 additions & 0 deletions
16
css/css-overflow/reference/text-overflow-scroll-rtl-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
font: 100px/1 Ahem; | ||
} | ||
</style> | ||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div>X pp</div> | ||
<div>ppp</div> | ||
<div>Xp</div> | ||
<div>ppp</div> |
20 changes: 20 additions & 0 deletions
20
css/css-overflow/reference/text-overflow-scroll-vertical-lr-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-lr; | ||
font: 100px/1 Ahem; | ||
height: 400px; | ||
white-space: pre; | ||
} | ||
</style> | ||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div>p pX</div> | ||
<div>pp p</div> | ||
<div> pX</div> | ||
<div>pp p</div> |
19 changes: 19 additions & 0 deletions
19
css/css-overflow/reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling reference file</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-lr; | ||
font: 100px/1 Ahem; | ||
height: 400px; | ||
} | ||
</style> | ||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div>X pp</div> | ||
<div>ppp</div> | ||
<div>Xp</div> | ||
<div>ppp</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
width: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollLeft = 200; | ||
test2.scrollLeft = 400; | ||
test3.scrollLeft = 200; | ||
test4.scrollLeft = 1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling RTL</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-rtl-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis' in RTL, the ellipsis should move to the new position."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
width: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
direction: rtl; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollLeft = -200; | ||
test2.scrollLeft = -400; | ||
test3.scrollLeft = -200; | ||
test4.scrollLeft = -1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> | ||
|
38 changes: 38 additions & 0 deletions
38
css/css-overflow/text-overflow-scroll-vertical-lr-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-lr</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-vertical-lr-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-lr writing mode too."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-lr; | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
height: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollTop = 200; | ||
test2.scrollTop = 400; | ||
test3.scrollTop = 200; | ||
test4.scrollTop = 1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> |
39 changes: 39 additions & 0 deletions
39
css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-lr RTL</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-lr writing mode and RTL too."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-lr; | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
height: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
direction: rtl; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollTop = -200; | ||
test2.scrollTop = -400; | ||
test3.scrollTop = -200; | ||
test4.scrollTop = -1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> |
38 changes: 38 additions & 0 deletions
38
css/css-overflow/text-overflow-scroll-vertical-rl-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-rl</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-vertical-lr-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-rl writing mode too."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-rl; | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
height: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollTop = 200; | ||
test2.scrollTop = 400; | ||
test3.scrollTop = 200; | ||
test4.scrollTop = 1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> |
39 changes: 39 additions & 0 deletions
39
css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: text-overflow: ellipsis and scrolling vertical-rl RTL</title> | ||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#ellipsis-scrolling"> | ||
<link rel="match" href="reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html"> | ||
<meta name="flags" content="should"> | ||
<meta name="assert" content="If you scroll an element with 'text-overflow: ellipsis', the ellipsis should move to the new position. This should work in vertical-rl writing mode and RTL too."> | ||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> | ||
<style> | ||
div { | ||
display: inline-block; | ||
writing-mode: vertical-rl; | ||
font: 100px/1 Ahem; | ||
white-space: pre; | ||
height: 400px; | ||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
direction: rtl; | ||
} | ||
</style> | ||
|
||
<p>The test passes if it matches the reference.</p> | ||
|
||
<div id="test1">ppp pp p</div> | ||
<div id="test2">ppp pp p</div> | ||
<div id="test3"><span style="padding-inline-start: 400px;">ppp pp p</span></div> | ||
<div id="test4"><span style="padding-inline-start: 600px;">ppp pp p</span></div> | ||
|
||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
test1.scrollTop = -200; | ||
test2.scrollTop = -400; | ||
test3.scrollTop = -200; | ||
test4.scrollTop = -1000; | ||
document.documentElement.className = ""; | ||
})); | ||
</script> |