Skip to main content

Browse the archive

Revision 208cfc11c0a61d6d44ec395699ff32c6dcf6ab52 authored by Manuel Rego Casasnovas on 19 March 2018, 16:01:26 UTC, committed by Chromium WPT Sync on 19 March 2018, 16:01:26 UTC 
Fix sizing of orthogonal elements with percentage margins
 
LayoutBox::FillAvailableMeasure() was not considering the case of
orthogonal elements when computing the margins.
The margins ended up being properly calculated but the size of
the orthogonal elements was wrong, as they considered
to have more or less space than the available one.

The method is modified in order to use
the containing block inline size in order to resolve the percentages:
https://www.w3.org/TR/css-writing-modes-3/#dimension-mapping

BUG=808758
TEST=external/wpt/css/css-writing-modes/sizing-orthogonal-percentage-margin-00*.html

Change-Id: Ib8c81dcd14589b3fefe806de3f8f75c000b1cac9
Reviewed-on: https://chromium-review.googlesource.com/968522
Commit-Queue: Koji Ishii <kojii@chromium.org>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#544047}
1 parent 5dee619
Raw File
pointerevent_pointerleave_does_not_bubble-manual.html 
<!doctype html>
<html>
    <head>
        <title>Pointer Event: The pointerleave event does not bubble </title>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/>
        <meta name="assert" content="The pointerleave event must not bubble up to parent elements."/>
        <link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
        <!-- /resources/testharness.js -->
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <!-- Additional helper script for common checks across event types -->
        <script type="text/javascript" src="pointerevent_support.js"></script>
        <script type="text/javascript">
            var detected_pointertypes = {};
            var test_pointerEvent = async_test("pointerLeave event does not bubble"); // set up test harness
            // showPointerTypes is defined in pointerevent_support.js
            // Requirements: the callback function will reference the test_pointerEvent object and
            // will fail unless the async_test is created with the var name "test_pointerEvent".
            add_completion_callback(showPointerTypes);

            function run() {
                var target0 = document.getElementById("target0");
                var parent0 = document.getElementById("parent0");

                on_event(target0, "pointerleave", function (event) {
                    detected_pointertypes[event.pointerType] = true;
                    check_PointerEvent(event);
                    test_pointerEvent.step(function () {
                        assert_equals(event.type, "pointerleave", "pointer event received: " + event.type);
                        assert_false(event.bubbles, "pointerleave event.bubbles should be false: " + event.bubbles);
                    });
                });

                on_event(parent0, "pointerleave", function (event) {
                    test_pointerEvent.step(function () {
                        assert_equals(event.target.id, "parent0", "Recieved " + event.type + " in parent for " + event.target.id);
                    });
                    test_pointerEvent.done(); // complete test
                });
            }
        </script>
        <style>
            #target0 {
            background: purple;
            border: 1px solid orange;
            width:50px;
            height:50px;
            }
            #parent0 {
            background: black;
            border: 1px solid orange;
            width:100px;
            height:100px;
            }
        </style>
    </head>
    <body onload="run()">
        <h1> Pointer Event: pointerleave does not bubble</h1>
        <h4>
            Test Description:
            The pointerleave event must not bubble up to parent elements.
        </h4>
        <div id="instructions">
            Use the mouse or pen to hover over then out of the purple box nested in the black box. Or with touch, tap on the purple box.
        </div>
        <div id="parent0">
            <div id="target0"></div>
        </div>
        <div id="complete-notice">
            <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p>
            <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
            <p>Refresh the page to run the tests again with a different pointer type.</p>
        </div>
        <div id="log"></div>
    </body>
</html>
back to top