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 2016-10-06 00:35:31 +08:00
Родитель 3375efb41f
Коммит 3a2d8faf25
12 изменённых файлов: 409 добавлений и 1 удалений

Просмотреть файл

@ -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

Просмотреть файл

@ -443,4 +443,18 @@ skip-if(Android) pref(layout.css.mix-blend-mode.enabled,true) == blend-differenc
== use-localRef-stroke-01.svg use-localRef-stroke-01-ref.svg
== use-localRef-mask-01.svg use-localRef-mask-01-ref.svg
fuzzy(1,5000) == mask-opacity-01.svg mask-opacity-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