Skip to content

GitLab

T
tangled
Commit c50ce0fb authored by Manuel Rego Casasnovas's avatar Manuel Rego Casasnovas Committed by Commit Bot
Browse files
Options

[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: default avatarKoji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#753508}
parent a764bf1f
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 1 deletion
third_party/blink/web_tests/TestExpectations
View file @ c50ce0fb
...@@ -2219,6 +2219,14 @@ crbug.com/305376 external/wpt/css/css-overflow/webkit-line-clamp-024.html [ Fail ...@@ -2219,6 +2219,14 @@ crbug.com/305376 external/wpt/css/css-overflow/webkit-line-clamp-024.html [ Fail
crbug.com/305376 external/wpt/css/css-overflow/webkit-line-clamp-027.html [ Failure ] crbug.com/305376 external/wpt/css/css-overflow/webkit-line-clamp-027.html [ Failure ]
crbug.com/1007065 external/wpt/css/css-overflow/overflow-codependent-scrollbars.html [ Failure ] crbug.com/1007065 external/wpt/css/css-overflow/overflow-codependent-scrollbars.html [ Failure ]
crbug.com/745905 external/wpt/css/css-ui/text-overflow-021.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-001.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-rtl-001.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-001.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-001.html [ Failure ]
crbug.com/745905 external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html [ Failure ]
crbug.com/424365 external/wpt/css/css-shapes/shape-outside/shape-image/shape-image-024.html [ Failure ] crbug.com/424365 external/wpt/css/css-shapes/shape-outside/shape-image/shape-image-024.html [ Failure ]
crbug.com/441840 [ Win ] external/wpt/css/css-shapes/shape-outside/values/shape-margin-001.html [ Failure ] crbug.com/441840 [ Win ] external/wpt/css/css-shapes/shape-outside/values/shape-margin-001.html [ Failure ]
crbug.com/441840 external/wpt/css/css-shapes/shape-outside/values/shape-outside-circle-004.html [ Failure ] crbug.com/441840 external/wpt/css/css-shapes/shape-outside/values/shape-outside-circle-004.html [ Failure ]
...@@ -3778,7 +3786,6 @@ crbug.com/626703 external/wpt/css/css-fonts/font-variant-position-03.html [ Fail ...@@ -3778,7 +3786,6 @@ crbug.com/626703 external/wpt/css/css-fonts/font-variant-position-03.html [ Fail
crbug.com/626703 external/wpt/css/css-fonts/font-variant-position.html [ Failure ] crbug.com/626703 external/wpt/css/css-fonts/font-variant-position.html [ Failure ]
crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006b.xht [ Failure ] crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006b.xht [ Failure ]
crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006c.xht [ Failure ] crbug.com/626703 external/wpt/css/css-tables/floats/floats-wrap-bfc-006c.xht [ Failure ]
crbug.com/626703 external/wpt/css/css-ui/text-overflow-021.html [ Failure ]
crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml [ Failure ] crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml [ Failure ]
crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml [ Failure ] crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml [ Failure ]
crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-006.xhtml [ Failure ] crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-align-self-baseline-horiz-006.xhtml [ Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-overflow/reference/text-overflow-scroll-001-ref.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/reference/text-overflow-scroll-rtl-001-ref.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/reference/text-overflow-scroll-vertical-lr-001-ref.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/reference/text-overflow-scroll-vertical-lr-rtl-001-ref.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-001.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-rtl-001.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-001.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-vertical-lr-rtl-001.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-001.html 0 → 100644
View file @ c50ce0fb
<!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>
third_party/blink/web_tests/external/wpt/css/css-overflow/text-overflow-scroll-vertical-rl-rtl-001.html 0 → 100644
View file @ c50ce0fb
<!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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment