forked from mirrors/gecko-dev
Bug 1558899: Added web-platform reftests for text-decoration-width r=dholbert
Differential Revision: https://phabricator.services.mozilla.com/D36270 --HG-- rename : testing/web-platform/tests/css/css-text-decor/reference/text-decoration-width-linethrough-001-ref.html => testing/web-platform/tests/css/css-text-decor/reference/text-decoration-width-green-rect-ref.html extra : moz-landing-system : lando
This commit is contained in:
Charlie Marlow
parent
d4e0edf215
commit
3cc10e36db
16 changed files with 269 additions and 1 deletions
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-width-overline-001.html]
|
||||
prefs: [layout.css.text-decoration-width.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-width-scroll-001.html]
|
||||
prefs: [layout.css.text-decoration-width.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-width-underline-001.html]
|
||||
prefs: [layout.css.text-decoration-width.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-width-vertical-001.html]
|
||||
prefs: [layout.css.text-decoration-width.enabled:true]
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
[text-decoration-width-vertical-002.html]
|
||||
prefs: [layout.css.text-decoration-width.enabled:true]
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Non-reference case for text-decoration-width</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#main {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference case for text-decoration-width</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div{
|
||||
height: 1em;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference case for text-decoration-width</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
border: black solid;
|
||||
height: 5em;
|
||||
width: 7em;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Test fails if there is a red line or scrollbar in the box</div>
|
||||
<div id="box">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Reference case for text-decoration-width</title>
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
background-color: green;
|
||||
height: 4em;
|
||||
width: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test fails if there is any red visible</p>
|
||||
<div id="box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,12 +8,14 @@
|
|||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="mismatch" href="reference/text-decoration-width-001-notref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#main {
|
||||
display: flex;
|
||||
}
|
||||
div span {
|
||||
text-decoration: green underline;
|
||||
text-decoration-skip-ink: none;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
padding-right: 1em;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-linethrough-001-ref.html">
|
||||
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
div{
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-decoration-width</title>
|
||||
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
overflow: hidden;
|
||||
height: 1em;
|
||||
width: 4em;
|
||||
background-color: red;
|
||||
}
|
||||
/*
|
||||
* This is testing to ensure that the overline
|
||||
* "grows up" and covers the red in the box
|
||||
*/
|
||||
#text{
|
||||
color: transparent;
|
||||
position: relative;
|
||||
top: 3em;
|
||||
text-decoration: green overline;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-width: 4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a wide green block, fails if there is any red visible</p>
|
||||
<div id="box">
|
||||
<div id="text">XXXXXXXXXXXXXXXXXXXX</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-decoration-width</title>
|
||||
<meta name="assert" content="text-decoration-width: increased width text decorations don't create scrollable overflow">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-scroll-001-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
border: black solid;
|
||||
overflow-y: auto;
|
||||
height: 5em;
|
||||
width: 7em;
|
||||
background-color: red;
|
||||
}
|
||||
/*
|
||||
* Testing to make sure that increasing the width of
|
||||
* of the text decoration does not create scrollable
|
||||
* overflow
|
||||
*/
|
||||
#text{
|
||||
position: relative;
|
||||
bottom: 1em;
|
||||
color: transparent;
|
||||
text-decoration: green underline;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-width: 8em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>Test fails if there is a red line or scrollbar in the box</div>
|
||||
<div id="box">
|
||||
<div id="text">XXXXXXX</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-decoration-width</title>
|
||||
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-green-rect-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
overflow: hidden;
|
||||
height: 1em;
|
||||
width: 4em;
|
||||
background-color: red;
|
||||
}
|
||||
/*
|
||||
* This is testing to ensure that the underline
|
||||
* "grows down" and covers the red in the box
|
||||
*/
|
||||
#text{
|
||||
color: transparent;
|
||||
position: relative;
|
||||
bottom: 3em;
|
||||
text-decoration: green underline;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-width: 4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a wide green block, fails if there is any red visible</p>
|
||||
<div id="box">
|
||||
<div id="text">XXXXXXXXXXXXXXXXXXXX</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-decoration-width</title>
|
||||
<meta name="assert" content="text-decoration-width: the width of the decoration line is increased">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-vertical-green-rect-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
background-color: red;
|
||||
height: 4em;
|
||||
width: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*
|
||||
* The underline is placed to the left of the text
|
||||
* at the right edge of the #box scrollpart. It is
|
||||
* 1.3 em away so that the entire text-decoration covers
|
||||
* the vertical box. Its text-decoration should grow "out"
|
||||
* away from the text, covering up the scrollport. We
|
||||
* will use 1.5 em-wide decoration line to be sure the
|
||||
* scrollport is still fully covered if there are small
|
||||
* differences in the placement of the line.
|
||||
*/
|
||||
#text{
|
||||
color: transparent;
|
||||
writing-mode: vertical-rl;
|
||||
position: relative;
|
||||
left: 1.3em;
|
||||
text-decoration: green underline;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-width: 1.5em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test fails if there is any red visible</p>
|
||||
<div id="box"><div id="text">XXXX</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test case for text-decoration-width</title>
|
||||
<meta name="assert" content="text-decoration:width; the width of the decoration line is increased">
|
||||
<link rel="author" title="Charlie Marlow" href="mailto:cmarlow@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-width-property">
|
||||
<link rel="match" href="reference/text-decoration-width-vertical-green-rect-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
<style>
|
||||
#box{
|
||||
font: 20px/1 Ahem;
|
||||
background-color: red;
|
||||
height: 4em;
|
||||
width: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
/*
|
||||
* The underline is placed to the right of the text
|
||||
* at the left edge of the #box scrollpart. Its
|
||||
* text-decoration should grow "out" away from the
|
||||
* text, covering up the scrollport. We will use a
|
||||
* 1.2 em-wide decoration line to be sure the
|
||||
* scrollport is still fully covered if there are
|
||||
* small differences in the placement of the line.
|
||||
*/
|
||||
#text{
|
||||
color: transparent;
|
||||
writing-mode: sideways-lr;
|
||||
position: relative;
|
||||
right: 1em;
|
||||
text-decoration: green underline;
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-width: 1.2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test fails if there is any red visible</p>
|
||||
<div id="box"><div id="text">XXXX</div></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue