[Webkit-unassigned] [Bug 234871] New: WebKit horizontal scrollbar not correctly displayed if theme enables steppers

Tue Jan 4 23:53:57 PST 2022

https://bugs.webkit.org/show_bug.cgi?id=234871

            Bug ID: 234871
           Summary: WebKit horizontal scrollbar not correctly displayed if
                    theme enables steppers
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: PC
                OS: Linux
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: WebKitGTK
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: simeon.danailov.andreev at gmail.com
                CC: bugs-noreply at webkitgtk.org

Created attachment 448361

  --> https://bugs.webkit.org/attachment.cgi?id=448361&action=review

Screenshot of the reproducer snippet, with enabled scrollbar steppers and disabled overlay scrollbars.

Description of problem:

The following theme code breaks WebKit horizontal scrollbars:

* { -GtkScrollbar-has-backward-stepper: true; -GtkScrollbar-has-forward-stepper: true; }

Version-Release number of selected component (if applicable):

Red Hat Enterprise Linux release 9.0 Beta (Plow)
gtk3-3.24.30-3.el9.x86_64
webkit2gtk3-2.32.3-2.el9.x86_64

How reproducible:

Run snippet provided below.

Steps to Reproduce:
1. Adjust the user .css to enable scrollbar steppers (create a backup beforehand if user .css already exists):

echo "* { -GtkScrollbar-has-backward-stepper: true; -GtkScrollbar-has-forward-stepper: true; }" > ~/.config/gtk-3.0/gtk.css

2. Create an .html file to display "overlay_scroll.html", with contents:

<!DOCTYPE html>
<html>
<head>
    <style>     
    div.scroll {
        margin: 4px, 4px;
        padding: 4px;
        width: 500px;
        overflow: scroll;
    }
    </style>
</head>
<body>
        <div class="scroll">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </div>
</body>
</html>

3. Create the GTK3 snippet "browser.cpp" with contents:

#include <gtk/gtk.h>
#include <webkit2/webkit2.h>

static void destroyWindowCb(GtkWidget* widget, GtkWidget* window);
static gboolean closeWebViewCb(WebKitWebView* webView, GtkWidget* window);

// gcc -g browser.cpp  `pkg-config --cflags --libs  webkit2gtk-4.0 gtk+-3.0` -o BrowserExample && ./BrowserExample

int main(int argc, char* argv[])
{
    // Initialize GTK+
    gtk_init(&argc, &argv);

    // Create a window that will contain the browser instance
    GtkWidget *main_window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_default_size(GTK_WINDOW(main_window), 300, 200);

    // Create a browser instance
    WebKitWebView *webView = WEBKIT_WEB_VIEW(webkit_web_view_new());

    // Put the browser area into the main window
    gtk_container_add(GTK_CONTAINER(main_window), GTK_WIDGET(webView));

    // Set up callbacks so that if either the main window or the browser instance is
    // closed, the program will exit
    g_signal_connect(main_window, "destroy", G_CALLBACK(destroyWindowCb), NULL);
    g_signal_connect(webView, "close", G_CALLBACK(closeWebViewCb), main_window);

    // Load a web page into the browser instance
    webkit_web_view_load_uri(webView, "file:///home/sandreev/overlay_scroll.html");

    // Make sure that when the browser area becomes visible, it will get mouse
    // and keyboard events
    gtk_widget_grab_focus(GTK_WIDGET(webView));

    // Make sure the main window and all its contents are visible
    gtk_widget_show_all(main_window);

    // Run the main GTK+ event loop
    gtk_main();

    return 0;
}

static void destroyWindowCb(GtkWidget* widget, GtkWidget* window)
{
    gtk_main_quit();
}

static gboolean closeWebViewCb(WebKitWebView* webView, GtkWidget* window)
{
    gtk_widget_destroy(window);
    return TRUE;
}

4. Run the snippet with command line:

gcc -g browser.cpp  `pkg-config --cflags --libs  webkit2gtk-4.0 gtk+-3.0` -o BrowserExample && ./BrowserExample

Actual results:

The horizontal scrollbar is not displayed correctly.

When overlay scrollbars are disabled, the horizontal scrollbar is undersized/misplaced, and a thick black bar is displayed above it.

When overlay scrollbars are enabled, the horizontal scrollbar is undersized/misplaced.

It looks like the horizontal scrollbar is drawn too low, but its hard to tell.

Expected results:

The horizontal scrollbar is displayed correctly.

Additional info:

RHEL bugzilla ticket: https://bugzilla.redhat.com/show_bug.cgi?id=2037016

Found while investigating Eclipse bug for JavaDoc/debugging hovers with GTK3: https://bugs.eclipse.org/bugs/show_bug.cgi?id=546961

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220105/23fa316e/attachment-0001.htm>