Skip to main content

Browse the archive

Revision 7ab96ca42be6ce12b7bf98088d5d154f8f15be59 authored by Morten Stenshorne on 05 April 2018, 06:52:57 UTC, committed by Chromium WPT Sync on 05 April 2018, 06:52:57 UTC 
Out-of-flow descendants may still be part of the flow thread.
 
When changing a layout object from in-flow to out-of-flow positioned, we
used to just remove it from the flow thread, risking that there'd no
longer be a column set to associate it with. However, an out-of-flow
positioned descendant may be contained by something that's inside the
flow thread, e.g. if the containing block of an absolutely positioned
object is a relatively positioned object, and that relatively positioned
object is contained by the flow thread.

Since it's hard to detect what the new containing block of an object is
going to be before it has actually gone out of flow, we'll still remove
it from the flow thread, but we'll now detect that we need to re-insert
it when computed style has updated.

Bug: 827424
Change-Id: I413348b0d3ecd0c4b5051e6e9d2a4526863bef60
Reviewed-on: https://chromium-review.googlesource.com/995439
Reviewed-by: Emil A Eklund <eae@chromium.org>
Commit-Queue: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548354}
1 parent 54f844c
Raw File
elementsFromPoint-simple.html 
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/elementsFromPoint.js"></script>
<style>
html, body {
    margin: 0;
    padding: 0;
}
body {
    height: 500px;
}
#simpleDiv {
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,255,0.5);
}
#divWithPseudo {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 100px;
    background-color: rgba(255,0,0,0.5);
}
#divWithPseudo::before {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    height: 100px;
    content: "::before";
    background-color: rgba(255,0,0,0.5);
    z-index: 9999;
}
#divBetweenPseudo {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 100px;
    height: 100px;
    background-color: rgba(0,255,0,0.5);
}
#withMargin {
    margin-top: -15px;
    width: 200px;
    height: 200px;
    background-color: rgba(0,0,0,0.5);
}
#inlineSpan {
    float: right;
    background-color: yellow;
    width: 100px;
    height: 1em;
}
#noPointerEvents {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    height: 300px;
    background-color: rgba(0,0,0,0.1);
    pointer-events: none;
}
#threeD {
    position: absolute;
    transform: translate3d(-100px, -100px, 10px);
    left: 140px;
    top: 140px;
    width: 200px;
    height: 50px;
    background-color: rgba(255,255,255,0.5);
}
</style>
<div id="simpleDiv"></div>
<div id="divWithPseudo"></div>
<div id="divBetweenPseudo"></div>
<div id="withMargin"><span id="inlineSpan"></span></div>
<div id="noPointerEvents"></div>
<div id="threeD"></div>
<script>
var body = document.body;
var html = document.documentElement;
test(function() {
    checkElementsFromPointFourCorners('document', 'simpleDiv',
        [simpleDiv, body, html],
        [simpleDiv, body, html],
        [withMargin, simpleDiv, body, html],
        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
}, "elementsFromPoint for each corner of a simple div");

test(function() {
    checkElementsFromPointFourCorners('document', 'divWithPseudo',
        [threeD, divWithPseudo, simpleDiv, body, html],
        [threeD, divWithPseudo, simpleDiv, body, html],
        [divWithPseudo, simpleDiv, body, html],
        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html]);
}, "elementsFromPoint for each corner of a div that has a pseudo-element");

test(function() {
    checkElementsFromPointFourCorners('document', 'divBetweenPseudo',
        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html],
        [divBetweenPseudo, simpleDiv, body, html],
        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
}, "elementsFromPoint for each corner of a div that is between another div and its pseudo-element");

test(function() {
    checkElementsFromPointFourCorners('document', 'withMargin',
        [withMargin, simpleDiv, body, html],
        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
        [withMargin, body, html],
        [withMargin, body, html]);
}, "elementsFromPoint for each corner of a div that has a margin");

test(function() {
    checkElementsFromPointFourCorners('document', 'noPointerEvents',
        [threeD, divWithPseudo, simpleDiv, body, html],
        [threeD, divWithPseudo, simpleDiv, body, html],
        [withMargin, body, html],
        [withMargin, body, html]);
}, "elementsFromPoint for each corner of a div with pointer-events:none");

test(function() {
    checkElementsFromPointFourCorners('document', 'threeD',
        [threeD, simpleDiv, body, html],
        [threeD, body, html],
        [threeD, simpleDiv, body, html],
        [threeD, body, html]);
}, "elementsFromPoint for each corner of a div with a 3d transform");
</script>
back to top