зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1299715 - Part 9. Test cases of clip-path and mask over an out-of-flow element. r=mstange
MozReview-Commit-ID: FV7N9OUnjZC --HG-- extra : rebase_source : 855207e6f44b0387a65bdffa735cdd16d6b8f4e6
This commit is contained in:
cku
Родитель
3375efb41f
Коммит
3a2d8faf25
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
mask: url(#myMask);
|
||||
clip-path: url(#myClip);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the mask, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<!-- The forth rect should be clipped out -->
|
||||
<rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
</mask>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
mask: url(#myMask);
|
||||
clip-path: url(#myClip);
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the mask, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse">
|
||||
<rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
</mask>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
<!-- The forth rect should be clipped out -->
|
||||
<rect x="300" y="300" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="margin: 0px;">
|
||||
<svg x="0" y="0" height="300" width="300">
|
||||
<rect x="0" y="0" width="100" height="100" style="stroke:none; fill: blue"/>
|
||||
<rect x="100" y="100" width="100" height="100" style="stroke:none; fill: blue"/>
|
||||
<rect x="200" y="200" width="100" height="100" style="stroke:none; fill: blue"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
clip-path: url(#myClip);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the clip-path, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
clip-path: url(#myClip);
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the clip-path, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body style="margin: 0px;">
|
||||
<svg width="200" height="200">
|
||||
<rect x="10" y="10" width="180" height="180" fill="blue" opacity="0.5"/>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
clip-path: inset(10px 10px 10px 10px);
|
||||
opacity: 0.5;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the clip-path, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
clip-path: inset(10px 10px 10px 10px);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: rgba(0,0,255,0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the clip-path, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<clipPath id="myClip">
|
||||
<rect x="0" y="0" width="100" height="100"/>
|
||||
<rect x="100" y="100" width="100" height="100"/>
|
||||
<rect x="200" y="200" width="100" height="100"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
mask: url(#myMask);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the mask, not by the 100x100
|
||||
overflow:hidden clip. -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg height="0">
|
||||
<defs>
|
||||
<mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox">
|
||||
<rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<!-- The forth rect should be clipped out -->
|
||||
<rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
</mask>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<style type="text/css">
|
||||
#outer {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#clipped {
|
||||
mask: url(mask-on-outflowElement.svg);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#absolutePosition {
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body style="margin: 0px;">
|
||||
<div id="outer">
|
||||
<div id="clipped">
|
||||
<div id="absolutePosition">
|
||||
<!-- This should only be clipped by the mask, not by the 100x100
|
||||
overflow:hidden clip.
|
||||
image mask is always clipped by the rect of associated element. The
|
||||
forth rectangle in mask-on-outflowElement.svg is clipped out since
|
||||
the size of #clipped is (w=300, height=300)
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
<rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 430 B |
|
|
@ -444,3 +444,17 @@ skip-if(Android) pref(layout.css.mix-blend-mode.enabled,true) == blend-differenc
|
|||
== use-localRef-mask-01.svg use-localRef-mask-01-ref.svg
|
||||
|
||||
fuzzy(1,5000) == mask-opacity-01.svg mask-opacity-01-ref.svg
|
||||
|
||||
== clipPath-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
|
||||
== clipPath-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
|
||||
|
||||
default-preferences pref(layout.css.clip-path-shapes.enabled,true)
|
||||
fuzzy(1,32400) == clipPath-on-outflowElement-02a.html clipPath-on-outflowElement-02-ref.html
|
||||
fuzzy(1,32400) == clipPath-on-outflowElement-02b.html clipPath-on-outflowElement-02-ref.html
|
||||
default-preferences
|
||||
|
||||
== mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
|
||||
== mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
|
||||
|
||||
== clipPath-and-mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html
|
||||
== clipPath-and-mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче