| <!DOCTYPE html> |
| <ruby> |
| <div></div> |
| <span id="firstInline"></span> |
| <rt id="rubyText" style="display:none;"></rt> |
| <span id="secondInline"></span> |
| <div id="removeMe"></div> |
| <div id="absPos" style="position:absolute;"></div> |
| <span id="addMe" style="display:none;"></span> |
| </ruby> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| // The comments describe what happens with crbug.com/852640 present. |
| test(() => { |
| // Perform 4 style changes. Relayout before and between each |
| // change. |
| document.body.offsetTop; |
| // Remove a regular block. Its previous and next siblings are an inline |
| // and an absolutely positioned object, respectively. They should be |
| // placed together, i.e. the absolutely positioned object should be put |
| // under the anonymous block around the inline. That's what would have |
| // happened if the style were like this during initial layout. Getting |
| // to the same style situation via DOM changes should result in the |
| // exact same tree. With the bug present, we just leave the absolutely |
| // positioned box alone, and keep it as a *sibling* (instead of making |
| // it a child, which would have been the correct thing) of the |
| // anonoymous wrapper around #firstInline and #secondInline. |
| document.getElementById("removeMe").style.display = "none"; |
| document.body.offsetTop; |
| // Add an inline after the absolutely positioned box. It finds no |
| // adjacent anonymous wrapper block (there's just #absPos, and it's not |
| // inside a wrapper), so it creates one, and puts itself and #absPos |
| // inside it. Now we have two sibling anonymous wrapper blocks (one with |
| // #firstInline and #secondInline, and one with #absPos and #addMe), |
| // which is weird. |
| document.getElementById("addMe").style.display = "inline"; |
| document.body.offsetTop; |
| // Insert an RT object between #firstInline and #secondInline. This will |
| // split the ruby run and the ruby base in two; one run and base that |
| // ends with #firstChild, and one run and base that starts with |
| // #secondChild. We now have a first ruby base that ends with an |
| // anonymous block (to contain #firstInline), and a second ruby base |
| // that starts with an anonymous block (to contain #secondInline). This |
| // is fine. |
| document.getElementById("rubyText").style.display = "block"; |
| document.body.offsetTop; |
| // Remove the RT object again. This will cause the two ruby runs and |
| // bases to be merged back into one. There is code that carefully makes |
| // sure that the anonymous block at the end of the first base is merged |
| // with the anonymous block at the start of the next base. This is the |
| // right thing to do, since we want the two inlines back on one and the |
| // same line. However, this will cause the first anonymous block in the |
| // second base to be destroyed (because its contents, |
| // i.e. #secondInline, is moved over to the anonymous block around |
| // #firstInline). This in turn will leave the second base with one |
| // anonymous block (around #absPos and #addMe). Our tree modification |
| // machinery will detect this and unwrap #absPos and #addMe from their |
| // anonymous block and destroy it. The second base will now be marked as |
| // "children inline", while the first base is still marked as having |
| // block children. This could be fine, but if we now just move the |
| // children of the second base directly into the first base, we're going |
| // to end up with a mix of block and inline children within the same |
| // block, and that's not allowed. |
| document.getElementById("rubyText").style.display = "none"; |
| }, "No crash or CHECK/DCHECK failure."); |
| </script> |
