Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit e6b498e

Browse files
Charlie Marlowmoz-wptsync-bot
Charlie Marlow
authored and
moz-wptsync-bot
committed
Part 2: Added reftests for text-decoration-skip-ink
Differential Revision: https://phabricator.services.mozilla.com/D40707 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1411922 gecko-commit: 5a8a2d0bc8590ded8b604b86bf1633def0669f6e gecko-integration-branch: autoland gecko-reviewers: jfkthame
1 parent 99fda55 commit e6b498e

9 files changed

+206
-0
lines changed

‎css/css-text-decor/reference/text-decoration-skip-ink-001-notref.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Non-reference case for text-decoration-skip-ink</title>
6+
<style>
7+
div{
8+
text-decoration: green underline;
9+
text-decoration-skip-ink: none;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<p>Test passes if the underline skips the p and g's in the text below</p>
15+
<div>ping pong</div>
16+
</body>
17+
</html>

‎css/css-text-decor/reference/text-decoration-skip-ink-002-ref.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Reference case for text-decoration-skip-ink</title>
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
7+
</head>
8+
<body>
9+
<p>Test passes if no underline is visible</p>
10+
</body>
11+
</html>

‎css/css-text-decor/reference/text-decoration-skip-ink-003-notref.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Non-reference case for text-decoration-skip-ink</title>
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
7+
<style>
8+
/*
9+
This non-reference case ensures that the test does
10+
not frivolously pass if the underline is not rendered at all
11+
*/
12+
div{
13+
font: 20px/1 Ahem;
14+
color: rgba(255,255,0,0.25);
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<p>Test passes if underline is rendered below the text</p>
20+
<div>XXXX</div>
21+
</body>
22+
</html>

‎css/css-text-decor/reference/text-decoration-skip-ink-003-ref.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Reference case for text-decoration-skip-ink</title>
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
7+
<style>
8+
div{
9+
font: 20px/1 Ahem;
10+
color: rgba(255,255,0,0.25);
11+
text-decoration: green underline;
12+
text-decoration-skip-ink: none;
13+
text-underline-offset: .5em;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<p>Test passes if underline is rendered below the text</p>
19+
<div>XXXX</div>
20+
</body>
21+
</html>

‎css/css-text-decor/reference/text-decoration-skip-ink-004-notref.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Non-reference case for text-decoration-skip-ink</title>
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
7+
<style>
8+
div{
9+
font: 20px/1 Ahem;
10+
color: rgba(255,255,0,0.25);
11+
text-decoration: green underline;
12+
text-decoration-skip-ink: none;
13+
text-underline-offset: -.3em;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<p>Test passes if underline appears only across the 'p' glyph</p>
19+
<div>XXpX</div>
20+
</body>
21+
</html>

‎css/css-text-decor/text-decoration-skip-ink-001.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test case for text-decoration-skip-ink</title>
6+
<meta name="assert" content="text-decoration-skip-ink: descenders are skipped">
7+
<link rel="author" title="Charlie Marlow" href="mailto:[email protected]">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property">
10+
<link rel="mismatch" href="reference/text-decoration-skip-ink-001-notref.html">
11+
<style>
12+
div{
13+
text-decoration: green underline;
14+
text-decoration-skip-ink: auto;
15+
}
16+
</style>
17+
</head>
18+
<body>
19+
<p>Test passes if the underline skips the p and g's in the text below</p>
20+
<div>ping pong</div>
21+
</body>
22+
</html>

‎css/css-text-decor/text-decoration-skip-ink-002.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test case for text-decoration-skip-ink</title>
6+
<meta name="assert" content="text-decoration-skip-ink: no underline is rendered for transparent Ahem font">
7+
<link rel="author" title="Charlie Marlow" href="mailto:[email protected]">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property">
10+
<link rel="match" href="reference/text-decoration-skip-ink-002-ref.html">
11+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
12+
<style>
13+
/*
14+
No underline should be rendered for Ahem text when
15+
text-decoration-skip-ink is applied.
16+
*/
17+
div{
18+
font: 20px/1 Ahem;
19+
text-decoration: green underline;
20+
text-decoration-skip-ink: auto;
21+
color: transparent;
22+
}
23+
</style>
24+
</head>
25+
<body>
26+
<p>Test passes if no underline is visible</p>
27+
<div>XXXX</div>
28+
</body>
29+
</html>

‎css/css-text-decor/text-decoration-skip-ink-003.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test case for text-decoration-skip-ink</title>
6+
<meta name="assert" content="text-decoration-skip-ink: an uninterrupted underline is rendered below the text">
7+
<link rel="author" title="Charlie Marlow" href="mailto:[email protected]">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property">
10+
<link rel="match" href="reference/text-decoration-skip-ink-003-ref.html">
11+
<link rel="mismatch" href="reference/text-decoration-skip-ink-003-notref.html">
12+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
13+
<style>
14+
/*
15+
This test ensures that the underline offset is taken into account
16+
when calculating the skip-ink. No skip-ink should be applied
17+
because the underline is being moved below the text.
18+
*/
19+
div{
20+
font: 20px/1 Ahem;
21+
color: rgba(255,255,0,0.25);
22+
text-decoration: green underline;
23+
text-decoration-skip-ink: auto;
24+
text-underline-offset: .5em;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<p>Test passes if underline is rendered below the text</p>
30+
<div>XXXX</div>
31+
</body>
32+
</html>

‎css/css-text-decor/text-decoration-skip-ink-004.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Test case for text-decoration-skip-ink</title>
6+
<meta name="assert" content="text-decoration-skip-ink: a partial underline is rendered above the 'p'">
7+
<link rel="author" title="Charlie Marlow" href="mailto:[email protected]">
8+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
9+
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property">
10+
<link rel="mismatch" href="reference/text-decoration-skip-ink-004-notref.html">
11+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
12+
<style>
13+
/*
14+
This test ensures that the underline offset is taken into account
15+
when calculating the skip-ink. The underline should skip all
16+
characters except the third.
17+
*/
18+
div{
19+
font: 20px/1 Ahem;
20+
color: rgba(255,255,0,0.25);
21+
text-decoration: green underline;
22+
text-decoration-skip-ink: auto;
23+
text-underline-offset: -.3em;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<p>Test passes if underline appears only across the 'p' glyph</p>
29+
<div>XXpX</div>
30+
</body>
31+
</html>

0 commit comments

Comments
 (0)