mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-26 14:22:01 +00:00
Bug 1311270 - Part 9. Test cases for new mask-clip/mask-origin values.
MozReview-Commit-ID: 2zdh6tHXXqg --HG-- extra : rebase_source : 166ccd5c661338f6f4d090275b486b6463fa4fc6
This commit is contained in:
cku
parent
2e82af6e3a
commit
a1ac3d58d1
@ -32,11 +32,19 @@
|
||||
width: 40px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
div.no-clip {
|
||||
left: 310px;
|
||||
margin: 1px 4px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="color border"></div>
|
||||
<div class="color padding"></div>
|
||||
<div class="color content"></div>
|
||||
<div class="color no-clip"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -7,9 +7,9 @@
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">
|
||||
<link rel="match" href="mask-clip-1-ref.html">
|
||||
<meta name="assert" content="border-box, padding-box, and content-box values of mask-clip should clip to the appropriate boxes.">
|
||||
<meta name="assert" content="border-box, padding-box, content-box and no-clip values of mask-clip should clip to the appropriate boxes.">
|
||||
<style type="text/css">
|
||||
div {
|
||||
div.outer {
|
||||
/*
|
||||
* content box: 40 x 20
|
||||
* padding box: 52 x 38
|
||||
@ -47,11 +47,31 @@
|
||||
left: 210px;
|
||||
mask-clip: content-box;
|
||||
}
|
||||
|
||||
div.no-clip {
|
||||
background-color: yellow;
|
||||
left: 310px;
|
||||
mask-clip: no-clip;
|
||||
}
|
||||
|
||||
div.no-clip-inner {
|
||||
background-color: purple;
|
||||
position: absolute;
|
||||
/* allign with border area of the parent*/
|
||||
top: -8px;
|
||||
left: -6px;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer mask border"></div>
|
||||
<div class="outer mask padding"></div>
|
||||
<div class="outer mask content"></div>
|
||||
<div class="outer mask no-clip">
|
||||
<div class="no-clip-inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS mask-clip reference</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200" style="left: 10px;">
|
||||
<rect x="20" y="20" width="100" height="100" fill="blue"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 220px;">
|
||||
<rect x="50" y="50" width="50" height="50" fill="blue"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 10px; top: 220px;">
|
||||
<rect x="50" y="50" width="50" height="50" fill="green"/>
|
||||
<rect x="60" y="60" width="40" height="40" fill="blue"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
49
layout/reftests/w3c-css/submitted/masking/mask-clip-2.html
Normal file
49
layout/reftests/w3c-css/submitted/masking/mask-clip-2.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-clip: clip mask image</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-mask-clip">
|
||||
<link rel="match" href="mask-clip-2-ref.html">
|
||||
<meta name="assert" content="fill-box, stroke-box and view-box values of mask-clip should clip to the appropriate boxes.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
rect.mask {
|
||||
fill: blue;
|
||||
mask-origin: fill-box;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
rect.view {
|
||||
mask-clip: view-box;
|
||||
}
|
||||
|
||||
rect.fill {
|
||||
mask-clip: fill-box;
|
||||
}
|
||||
|
||||
rect.stroke {
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
|
||||
<rect class="view mask" x="110" y="110" width="50" height="100"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 220px;">
|
||||
<rect class="fill mask" x="50" y="50" width="150" height="150"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 10px; top: 220px;">
|
||||
<rect class="stroke mask" x="50" y="50" width="100" height="100" stroke="green" stroke-width="20"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200" style="left: 10px;">
|
||||
<rect x="50" y="50" width="50" height="50" fill="blue"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 240px;">
|
||||
<rect x="50" y="50" width="50" height="50" fill="green"/>
|
||||
<rect x="60" y="60" width="40" height="40" fill="blue"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 10px; top: 220px;">
|
||||
<rect x="60" y="40" width="50" height="50" fill="green"/>
|
||||
<rect x="80" y="60" width="30" height="30" fill="blue"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
52
layout/reftests/w3c-css/submitted/masking/mask-origin-3.html
Normal file
52
layout/reftests/w3c-css/submitted/masking/mask-origin-3.html
Normal file
@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Masking: mask-origin: mask positioning area</title>
|
||||
<link rel="author" title="CJ Ku" href="mailto:cku@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-origin">
|
||||
<link rel="match" href="mask-origin-3-ref.html">
|
||||
<meta name="assert" content="Test checks whether setting mask position area works correctly or not.">
|
||||
<style type="text/css">
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
rect.mask {
|
||||
fill: blue;
|
||||
mask-origin: fill-box;
|
||||
mask-clip: fill-box;
|
||||
mask-repeat: no-repeat;
|
||||
mask-image: url(support/50x50-opaque-blue.svg);
|
||||
}
|
||||
|
||||
rect.view {
|
||||
mask-origin: view-box;
|
||||
mask-clip: view-box;
|
||||
}
|
||||
|
||||
rect.fill {
|
||||
mask-origin: fill-box;
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
|
||||
rect.stroke {
|
||||
mask-origin: stroke-box;
|
||||
mask-clip: stroke-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<svg width="200" height="200" viewBox="100 100 100 100" preserveAspectRatio="none" style="left: 10px;">
|
||||
<rect class="view mask" x="125" y="125" width="100" height="100"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 240px;">
|
||||
<rect class="fill mask" x="50" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
|
||||
</svg>
|
||||
<svg width="200" height="200" style="left: 10px; top: 220px;">
|
||||
<rect class="stroke mask" x="70" y="50" width="80" height="80" stroke="green" stroke-width="20"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
@ -35,6 +35,7 @@ fuzzy-if(skiaContent,71,203) == mask-image-3i.html mask-image-3-ref.html
|
||||
|
||||
# mask-clip test cases
|
||||
== mask-clip-1.html mask-clip-1-ref.html
|
||||
== mask-clip-2.html mask-clip-2-ref.html
|
||||
|
||||
# mask-position test cases
|
||||
== mask-position-1a.html mask-position-1-ref.html
|
||||
@ -60,6 +61,7 @@ fuzzy-if(skiaContent,71,203) == mask-image-3i.html mask-image-3-ref.html
|
||||
# mask-origin test cases
|
||||
== mask-origin-1.html mask-origin-1-ref.html
|
||||
fails == mask-origin-2.html mask-origin-2-ref.html # bug 1260094
|
||||
== mask-origin-3.html mask-origin-3-ref.html
|
||||
|
||||
# mask-size test cases
|
||||
== mask-size-auto.html mask-size-auto-ref.html
|
||||
|
||||
Loading…
Reference in New Issue
Block a user