зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1674318 [wpt PR 26342] - Border radius clip improvements, a=testonly
Automatic update from web-platform-tests [css-backgrounds-3] Add reference, make test more rigorous. -- [css-backgrounds-3] Make border-radius clipping test cover more cases. https://github.com/w3c/csswg-drafts/issues/5680 -- [css-backgrounds-3] Remove redundant test. -- wpt-commits: cf9c20c341c9eaff9477c005943864aee35db1f3, e8be8a31f4e0964c817b000332009f5477631eaa, 9219aa2192fc3a52b4323f3908270562b1c21e97 wpt-pr: 26342
This commit is contained in:
fantasai
moz-wptsync-bot
Родитель
44b3ddcc53
Коммит
e42d4f5b04
|
|
@ -1,34 +0,0 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: 'Overflow' clips to the curve of the rounded corner.</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="'Overflow' clips to the curve of the rounded corner." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
border-radius: 40px;
|
||||
height: 1in;
|
||||
width: 2in;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 'Filler Text' below is clipped to the curve of the rounded corners.</p>
|
||||
<div>
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
Filler Text. Filler Text.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: 'border-radius' and corner-clipping of content</title>
|
||||
|
||||
<link rel="author" title="zhouli" href="mailto:liz@oupeng.com">
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-background-3/#corner-clipping">
|
||||
<link rel="match" href="reference/border-radius-clipping-ref.html">
|
||||
|
||||
<meta name="assert" content="Test passes if a box with border-radius that clips its content to a box edge clips to the border-radius curve in the corners.">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
body > div { float: left; }
|
||||
.round
|
||||
{
|
||||
border: transparent double 20px;
|
||||
border-radius: 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
#bg, #txt, #img-contain
|
||||
{
|
||||
overflow: hidden;
|
||||
width: 80px;
|
||||
}
|
||||
#bg > div
|
||||
{
|
||||
margin: -10px;
|
||||
background-image: url("support/100x100-green-with-red-corners.png");
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#txt > div
|
||||
{
|
||||
margin: -10px;
|
||||
color: green;
|
||||
font: 50px/1 Ahem;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
#img-contain > img
|
||||
{
|
||||
margin: -10px;
|
||||
}
|
||||
#img-self
|
||||
{
|
||||
margin: -10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there are four filled green circles and <strong>no red</strong>.
|
||||
|
||||
<div id="bg" class="round">
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div id="txt" class="round">
|
||||
<div>XX<br>XX</div>
|
||||
</div>
|
||||
|
||||
<div id="img-contain" class="round">
|
||||
<img src="support/swatch-green.png" width=100 height=100>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img id="img-self" class="round" src="support/swatch-green.png" width=100>
|
||||
</div>
|
||||
|
|
@ -1,36 +1,58 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Background is clipped to the curve of the content-box when 'background-clip: content-box'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Background is clipped to the curve of the content-box when 'background-clip: content-box'" />
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="match" href="reference/border-radius-clip-002-ref.htm">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#corner-clipping">
|
||||
<meta name="assert" content="Background is clipped to the curve of the content-box when 'background-clip: content-box'">
|
||||
<style type="text/css">
|
||||
#test
|
||||
#test-base
|
||||
{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid black;
|
||||
padding: 10px;
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
border: 10px double black;
|
||||
padding: 11px;
|
||||
border-radius: 40px;
|
||||
background: red;
|
||||
background: red url(support/swatch-red.png);
|
||||
background-clip: content-box;
|
||||
}
|
||||
#reference
|
||||
#reference-cover
|
||||
{
|
||||
margin-top: -120px;
|
||||
margin-left: 20px;
|
||||
margin: -120px 0 40px 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 20px;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
#reference-base
|
||||
{
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
margin-left: 20px;
|
||||
border-radius: 20px;
|
||||
background: red url(support/swatch-red.png);
|
||||
}
|
||||
#test-cover
|
||||
{
|
||||
margin-top: -120px;
|
||||
border: 10px double black;
|
||||
padding: 10px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 40px;
|
||||
background-color: black;
|
||||
background-clip: content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div id="test"></div>
|
||||
<div id="reference"></div>
|
||||
<div id="test-base"></div>
|
||||
<div id="reference-cover"></div>
|
||||
<div id="reference-base"></div>
|
||||
<div id="test-cover"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: 'border-radius' and corner-clipping of content elements</title>
|
||||
|
||||
<link rel="author" title="zhouli" href="mailto:liz@oupeng.com">
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#corner-clipping">
|
||||
<link rel="match" href="reference/border-radius-clipping-ref.html">
|
||||
|
||||
<meta content="" name="flag">
|
||||
<meta name="assert" content="When set with 'overflow: hidden', an outer container must clip background area of its child element at its corners. In this test, the outer container has a 'border-radius' declaration which implies that the clipping must occur at its curves.">
|
||||
|
||||
<style>
|
||||
div#parent
|
||||
{
|
||||
border: transparent solid 20px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#son
|
||||
{
|
||||
background-color: red;
|
||||
background-image: url("support/100x100-green-with-red-corners.png");
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green circle and <strong>no red</strong>.
|
||||
|
||||
<div id="parent">
|
||||
<div id="son"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Background is clipped to the curve of the content-box when 'background-clip: content-box'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
|
||||
<style type="text/css">
|
||||
.base
|
||||
{
|
||||
width: 98px;
|
||||
height: 98px;
|
||||
border: 10px double black;
|
||||
padding: 11px;
|
||||
border-radius: 40px;
|
||||
}
|
||||
.cover
|
||||
{
|
||||
margin: -120px 0 40px 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 20px;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="base"></div>
|
||||
<div class="cover"></div>
|
||||
<div class="base"></div>
|
||||
<div class="cover"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -11,14 +11,19 @@
|
|||
{
|
||||
background-color: green;
|
||||
border-radius: 50%;
|
||||
margin: 20px;
|
||||
height: 100px;
|
||||
left: 20px;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
width: 100px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green circle and <strong>no red</strong>.
|
||||
<p>Test passes if there are four filled green circles and <strong>no red</strong>.
|
||||
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
|
||||
<div></div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче