Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The CSS-text-decoration spec doesn't explicitly say anything about maintaining the dotted-line pattern continuously across direction-run or inline-element boundaries, which is what this is testing, but I think that follows from the fact that in each example here, there is a single "decorating box" involved (and not separate, independently-decorated boxes for each direction-run or span). Depends on D134783 Differential Revision: https://phabricator.services.mozilla.com/D134870 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1747690 gecko-commit: ecf8c388c15142f3752764f247e82cb220cf3f9f gecko-reviewers: emilio
- Loading branch information
1 parent
0d1f830
commit 4bc01aa
Showing
4 changed files
with
139 additions
and
0 deletions.
There are no files selected for viewing
33 changes: 33 additions & 0 deletions
33
css/css-text-decor/reference/text-decoration-dotted-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,33 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Reference for text-decoration across direction-run boundaries</title> | ||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<style> | ||
div { | ||
font: 92px Arial, sans-serif; | ||
-webkit-text-decoration: dotted red underline; | ||
text-decoration: dotted red underline; | ||
margin: .5em; | ||
unicode-bidi: bidi-override; | ||
} | ||
.test1 { | ||
text-decoration-thickness:10px; | ||
} | ||
.test2 { | ||
text-decoration-thickness:20px; | ||
} | ||
.test3 { | ||
text-decoration-thickness:30px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>Test passes if the dotted red underlines are uniform throughout each line:</p> | ||
<div class=test1>fooםולשbaz</div> | ||
<div class=test2>fooםולשbaz</div> | ||
<div class=test3>fooםולשbaz</div> | ||
</body> | ||
</html> |
32 changes: 32 additions & 0 deletions
32
css/css-text-decor/reference/text-decoration-dotted-002-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,32 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Reference for text-decoration across inline-element boundaries</title> | ||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<style> | ||
div { | ||
font: 92px Arial, sans-serif; | ||
-webkit-text-decoration: dotted red underline; | ||
text-decoration: dotted red underline; | ||
margin: .5em; | ||
} | ||
.test1 { | ||
text-decoration-thickness:10px; | ||
} | ||
.test2 { | ||
text-decoration-thickness:20px; | ||
} | ||
.test3 { | ||
text-decoration-thickness:30px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>Test passes if the dotted red underlines are uniform throughout each line:</p> | ||
<div class=test1>foobarbaz</div> | ||
<div class=test2>foobarbaz</div> | ||
<div class=test3>foobarbaz</div> | ||
</body> | ||
</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,37 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Test case for text-decoration across direction-run boundaries</title> | ||
<meta name="assert" content="The dotted line generated by a single decorating box should be continuous"> | ||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#line-decoration"> | ||
<link rel="match" href="reference/text-decoration-dotted-001-ref.html"> | ||
<style> | ||
div { | ||
font: 92px Arial, sans-serif; | ||
-webkit-text-decoration: dotted red underline; | ||
text-decoration: dotted red underline; | ||
margin: .5em; | ||
} | ||
.test1 { | ||
text-decoration-thickness:10px; | ||
} | ||
.test2 { | ||
text-decoration-thickness:20px; | ||
} | ||
.test3 { | ||
text-decoration-thickness:30px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>Test passes if the dotted red underlines are uniform throughout each line:</p> | ||
<!-- The direction-run changes should not disrupt the rendering of the decoration lines, | ||
as there is still just a single Decorating Box involved in each example. --> | ||
<div class=test1>fooשלוםbaz</div> | ||
<div class=test2>fooשלוםbaz</div> | ||
<div class=test3>fooשלוםbaz</div> | ||
</body> | ||
</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,37 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<title>Test case for text-decoration across inline-element boundaries</title> | ||
<meta name="assert" content="The dotted line generated by a single decorating box should be continuous"> | ||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#line-decoration"> | ||
<link rel="match" href="reference/text-decoration-dotted-002-ref.html"> | ||
<style> | ||
div { | ||
font: 92px Arial, sans-serif; | ||
-webkit-text-decoration: dotted red underline; | ||
text-decoration: dotted red underline; | ||
margin: .5em; | ||
} | ||
.test1 { | ||
text-decoration-thickness:10px; | ||
} | ||
.test2 { | ||
text-decoration-thickness:20px; | ||
} | ||
.test3 { | ||
text-decoration-thickness:30px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<p>Test passes if the dotted red underlines are uniform throughout each line:</p> | ||
<!-- The inline elements should not disrupt the rendering of the decoration lines, | ||
as there is still just a single Decorating Box involved in each example. --> | ||
<div class=test1>foo<span>bar</span>baz</div> | ||
<div class=test2>foo<span>bar</span>baz</div> | ||
<div class=test3>foo<span>bar</span>baz</div> | ||
</body> | ||
</html> |