mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 04:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Don't crash on transformed clip-paths

Browse source 
We can remove this check and FIXME because we already support them
This commit is contained in:
Gingeh 2024-11-01 10:13:07 +11:00 • committed by Tim Ledbetter
commit c4e8eeb9a3
Notes: github-actions[bot] 2024-11-02 04:31:14 +00:00
4 changed files with 93 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

84
Tests/LibWeb/Screenshot/clip-path-transformed.html Normal file
View file

@ -0,0 +1,84 @@
<link rel="match" href="reference/clip-path-transformed-ref.html" />
<style>
body {
font-size: 0;
}
.outer {
margin: 5px;
width: 130px;
height: 80px;
display: inline-block;
background-color: grey;
outline: 2px solid black;
}
.inner {
height: 100%;
background-color: black;
clip-path: polygon(evenodd, 65px 0px, 35px 80px, 105px 30px, 25px 30px, 95px 80px);
}
</style>
<div class="outer" style="transform: matrix(1, 2, 3, 4, 5, 6)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: perspective(17px)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: rotate(0.5turn)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: rotateX(10deg)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: rotateY(10deg)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: rotateZ(10deg)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translate(12px, 50%)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translate3d(12px, 50%, 3em)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translateX(2em)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translateY(3in)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translateZ(2px)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: scale(2, 0.5)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: scale3d(2.5, 1.2, 0.3)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: scaleX(2)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: scaleY(0.5)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: scaleZ(0.3)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: skew(30deg, 20deg)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: skewX(30deg)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: skewY(1.07rad)">
<div class="inner"></div>
</div>
<div class="outer" style="transform: translateX(10px) rotate(10deg) translateY(5px)">
<div class="inner"></div>
</div>

BIN
Tests/LibWeb/Screenshot/images/clip-path-transformed-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB

9
Tests/LibWeb/Screenshot/reference/clip-path-transformed-ref.html Normal file
View file

@ -0,0 +1,9 @@
<style>
* {
margin: 0;
}
body {
background-color: white;
}
</style>
<img src="../images/clip-path-transformed-ref.png">

3
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -1010,9 +1010,6 @@ void PaintableBox::set_needs_display(InvalidateDisplayList should_invalidate_dis
Optional<CSSPixelRect> PaintableBox::get_masking_area() const
{
// FIXME: Support clip-paths with transforms.
if (!combined_css_transform().is_identity_or_translation())
return {};
auto clip_path = computed_values().clip_path();
// FIXME: Support other clip sources.
if (!clip_path.has_value() || !clip_path->is_basic_shape())