Skip to main content

Browse the archive

Revision b5b3c1f0c2c224e863e50ad3f78ed5af0d73981e authored by Morten Stenshorne on 13 March 2018, 11:29:55 UTC, committed by Blink WPT Bot on 13 March 2018, 11:37:14 UTC 
[LayoutNG] Need parent's clearance offset when positioning child.
 
If clear is specified on an element whose first piece of content is
inside a child (so that the element's BFC offset cannot be determined at
the beginning of layout), we need this child to know about the clearance
offset on the parent, or it will not be pushed below adjacent floats as
it should. Just pushing the parent, but leaving the children unaffected
by clearance won't do. We need this in order to be able to lay out in a
single pass (and apply clearance when we detect it, rather than doing
it on the element with 'clear' and relayout the children if something
moved).

Since a constraint space's clearance offset is now "inherited" down the
tree, as long as we're within the same block formatting context, we now
also need to propagate the "is pushed by floats" flag upwards, or we
won't detect class C break points correctly. Without this the unit test
ClassCBreakPointBeforeBlockMarginCollapsing in
NGColumnLayoutAlgorithmTest would regress, because it would incorrectly
detect a class C break point before the break-inside:avoid block.
We must make sure that class C break points are only detected on the
outermost block that got pushed by floats, because it's there that
we'll get the gap between the inner edge of the container and the outer
edge of the child.

Added some tests. One of them fails in legacy (but not in NG). One of
the tests, clear-on-child-with-margins.html, passes both with and
without this code change, but I started to wonder if we'd suddenly
could end up pulling the parent of the box with 'clear' downwards, so
thought I better add it, to make sure we don't regress in this regard.

The test NoClassCBreakPointBeforeBfc in
NGColumnLayoutAlgorithmTest no longer needs its workaround,
because the display:flow-root child of #container now sets its
position correctly (past the float) right away.

Acid2 also looks slightly better now!

Cq-Include-Trybots: master.tryserver.chromium.linux:linux_layout_tests_layout_ng
Change-Id: I732b19398bd43b9874f6bb8c57ce435d1c510754
Reviewed-on: https://chromium-review.googlesource.com/957045
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Reviewed-by: Emil A Eklund <eae@chromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542769}
1 parent c7a4bd8
Raw File
canvas_shadows_001.htm 
<!doctype HTML>
<html>
    <head>
        <title>HTML5 Canvas Test: Shadows for linear gradients</title>
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
        <link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
        <meta name="assert" content="Shadows must be drawn for linear gradients." />
        <script type="text/javascript">
            async_test(function(t) {
              window.addEventListener("load", t.step_func_done(function runTest() {
                var canvas = document.getElementById("canvas1");
                var ctx = canvas.getContext("2d");

                // Draw a red rectangle.
                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
                ctx.fillRect(150, 0, 100, 50);

                // Set shadow styles to draw a black shadow to overlap the red rectangle.
                ctx.shadowOffsetX = 150;
                ctx.shadowColor = "rgba(0, 0, 0, 1.0)";

                // Draw a left to right, green-to-blue linear gradient.
                var lingrad = ctx.createLinearGradient(0, 50, 100, 50);
                lingrad.addColorStop(0, "rgba(0, 255, 0, 1.0)");
                lingrad.addColorStop(1, "rgba(0, 0, 255, 1.0)");
                ctx.fillStyle = lingrad;
                ctx.fillRect(0, 0, 100, 50);

                // Check the red is gone
                var data = ctx.getImageData(150, 0, 100, 50);
                for (var i = 0; i < data.data.length; i += 4) {
                  var r = data.data[i];
                  var g = data.data[i+1];
                  var b = data.data[i+2];
                  var a = data.data[i+3];
                  assert_equals(r, 0, "r channel");
                  assert_equals(g, 0, "g channel");
                  assert_equals(b, 0, "b channel");
                  assert_equals(a, 0xFF, "a channel");
                }

                for (var j = 0; j < data.data.length; j += 4) {
                  var r2 = data.data[j];
                  var g2 = data.data[j+1];
                  var b2 = data.data[j+2];
                  var a2 = data.data[j+3];
                  assert_false(r2 == 0xFF && g2 == 0 && b2 == 0 && a2 == 0xFF, "no red");
                }
              }));
            }, "linear gradient fillRect draws shadow (black rectange)");
        </script>
    </head>
    <body>
        <p>Description: Shadows must be drawn for linear gradients.</p>
        <p>Test passes if there is one gradient filled rectangle and one black rectangle, and no red seen on the page.</p>
        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
    </body>
</html>
back to top