LibWeb/Painting: Fix blending with viewport background
The viewport is now drawn onto transparent black instead of the background color of the viewport.
Glenn Skrzypczak
Alexander Kalenik
Author: https://github.com/skyz1 Commit: https://github.com/LadybirdBrowser/ladybird/commit/da096081564 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4150
|
|
@ -8,6 +8,7 @@
|
|||
#include <LibWeb/DOM/Range.h>
|
||||
#include <LibWeb/Layout/TextNode.h>
|
||||
#include <LibWeb/Layout/Viewport.h>
|
||||
#include <LibWeb/Painting/DisplayListRecorder.h>
|
||||
#include <LibWeb/Painting/StackingContext.h>
|
||||
#include <LibWeb/Painting/ViewportPaintable.h>
|
||||
#include <LibWeb/Selection/Selection.h>
|
||||
|
|
@ -63,7 +64,9 @@ void ViewportPaintable::build_stacking_context_tree()
|
|||
void ViewportPaintable::paint_all_phases(PaintContext& context)
|
||||
{
|
||||
build_stacking_context_tree_if_needed();
|
||||
context.display_list_recorder().save_layer();
|
||||
stacking_context()->paint(context);
|
||||
context.display_list_recorder().restore();
|
||||
}
|
||||
|
||||
void ViewportPaintable::assign_scroll_frames()
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../expected/color-hsl-ref.html" />
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../expected/color-hwb-ref.html" />
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../expected/color-oklab-ref.html" />
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../expected/color-oklch-ref.html" />
|
||||
<style>
|
||||
html { background-color: white; }
|
||||
div {
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
|
|
|
|||
10
Tests/LibWeb/Screenshot/expected/css-compositing-ref.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<img src="../images/css-compositing-ref.png">
|
||||
|
Before Width: | Height: | Size: 330 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 65 KiB |
|
Before Width: | Height: | Size: 238 KiB After Width: | Height: | Size: 265 KiB |
|
Before Width: | Height: | Size: 90 KiB After Width: | Height: | Size: 108 KiB |
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 148 KiB |
BIN
Tests/LibWeb/Screenshot/images/css-compositing-ref.png
Normal file
|
After Width: | Height: | Size: 5.7 KiB |
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.5 KiB |
|
Before Width: | Height: | Size: 112 KiB After Width: | Height: | Size: 109 KiB |
|
Before Width: | Height: | Size: 257 KiB After Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 589 KiB After Width: | Height: | Size: 683 KiB |
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 107 KiB |
|
Before Width: | Height: | Size: 5 KiB After Width: | Height: | Size: 5 KiB |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 69 KiB After Width: | Height: | Size: 87 KiB |
44
Tests/LibWeb/Screenshot/input/css-compositing.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../expected/css-compositing-ref.html" />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 50%;
|
||||
}
|
||||
#d1 {
|
||||
background-color: rgb(186, 190, 92);
|
||||
}
|
||||
#d2 {
|
||||
background-color: linear-gradient(to right rgb(255, 132, 0) 51%),
|
||||
linear-gradient(to right, rgb(255, 0, 212));
|
||||
background-blend-mode: normal, difference;
|
||||
mix-blend-mode: screen;
|
||||
top: 10px;
|
||||
}
|
||||
#d3 {
|
||||
background-color: rgb(21, 107, 118);
|
||||
isolation: isolate;
|
||||
mix-blend-mode: multiply;
|
||||
top: 20px;
|
||||
}
|
||||
#d4 {
|
||||
background-color: linear-gradient(to right rgb(77, 145, 113) 51%),
|
||||
linear-gradient(to right, rgb(60, 118, 41));
|
||||
background-blend-mode: normal, exclusion;
|
||||
mix-blend-mode: normal;
|
||||
isolation: isolate;
|
||||
top: 30px;
|
||||
}
|
||||
#d5 {
|
||||
background-color: rgb(34, 29, 78);
|
||||
mix-blend-mode: difference;
|
||||
top: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id="d1">111</div>
|
||||
<div id="d2">222</div>
|
||||
<div id="d3">333</div>
|
||||
<div id="d4">444</div>
|
||||
<div id="d5">555</div>
|
||||