2017-02-16  Miguel Gomez  <magomez@igalia.com>

        [GTK] scroll with transparent background not repainted after scrollY >= 32768

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

        Reviewed by NOBODY (OOPS!).

        Due to a limitation of the pixman backend, which uses 16 bits to hold signed integers, cairo is

        not able to draw anything when using transformation matrices with values bigger than 32768. When

        drawing patterns into large pages, the matrices values can overflow those 16 bits, so cairo doesn't

        draw anything in, which causes the reported transparent backgrounds.

        The patch modifies the transformation matrices both from the current context and the pattern we

        are painting, to avoid them to hold values that cannot stored in 16 bits.

        There's still the possibility that this happens, but it would require using a pattern with a size

        bigger than 32768.

        Based on a previous patch by Gwang Yoon Hwang  <yoon@igalia.com>.

        Test: fast/backgrounds/background-repeat-long-scroll.html

        * platform/graphics/cairo/CairoUtilities.cpp:

        (WebCore::drawPatternToCairoContext):

    // Due to a limitation in pixman, cairo cannot handle transformation matrices with values bigger than 32768. If the value is

    // bigger, cairo is not able to paint anything, and this is the reason for the missing backgrounds reported in

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

    // When drawing a pattern there are 2 matrices that can overflow this limitation, and they are the current transformation

    // matrix (which translates user space coordinates to coordinates of the output device) and the pattern matrix (which translates

    // user space coordinates to pattern coordinates). The overflow happens only in the translation components of the matrices.

    // To avoid the problem in the transformation matrix what we do is remove the translation components of the transformation matrix

    // and perform the translation by moving the destination rectangle instead. For this, we get its translation components (which are in

    // device coordinates) and divide them by the scale factor to take them to user space coordinates. Then we move the transformation

    // matrix by the opposite of that amount (which will zero the translation components of the transformation matrix), and move

    // the destination rectangle by the same amount. We also need to apply the same translation to the pattern matrix, so we get the

    // same pattern coordinates for the new destination rectangle.

    cairo_matrix_t ctm;

    cairo_get_matrix(cr, &ctm);

    double dx = 0, dy = 0;

    cairo_matrix_transform_point(&ctm, &dx, &dy);

    double xScale = 1, yScale = 1;

    cairo_matrix_transform_distance(&ctm, &xScale, &yScale);

    dx = dx / xScale;

    dy = dy / yScale;

    cairo_translate(cr, -dx, -dy);

    FloatRect adjustedDestRect(destRect);

    adjustedDestRect.move(dx, dy);

    // Regarding the pattern matrix, what we do is reduce the translation component of the matrix taking advantage of the fact that we

    // are drawing a repeated pattern. This means that, assuming that (w, h) is the size of the pattern, samplig it at (x, y) is the same

    // than sampling it at (x mod w, y mod h), so we transform the translation component of the pattern matrix in that way.

2017-02-16  Miguel Gomez  <magomez@igalia.com>

        [GTK] scroll with transparent background not repainted after scrollY >= 32768

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

        Reviewed by NOBODY (OOPS!).

        Test to ensure that the background pattern of an element is properly being drawn when it's in a position

        bigger than 32768.

        * fast/backgrounds/background-repeat-long-scroll-expected.html: Added.

        * fast/backgrounds/background-repeat-long-scroll.html: Added.

<!DOCTYPE html>

<html>

<head>

<style>

#div1 {

background-color: black;

width: 100%;

height: 35000px;

}

</style>

</head>

<body onload="window.scrollTo(0,34000)">

<div id="div1">

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<style>

#div1 {

background: url('./resources/black25x25.png') left top repeat;

width: 100%;

height: 35000px;

}

</style>

</head>

<body onload="window.scrollTo(0,34000)">

<div id="div1">

</div>

</body>

</html>