Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[LayoutNG] Fix
vertical-align: top
and bottom
This patch fixes `vertical-align: top` and `bottom` when they are applied to a box that has children with `text-top` or `text-bottom`. In LayoutNG, `vertical-align` is handled in 3 different timings. 1. `top` and `bottom` are added to the pending list of the line box, or to the nearest ancestor box that has `top` or `bottom`. 2. `text-bop` and `text-bottom` are added to the pending list of the parent box. 3. Other values are computed when the box is closed. When a box has both 1 and 2, this patch changes to compute 1 (`top` and `bottom`) after 2. Before this patch, both 1 and 2 are computed at the same time for each box. 3 test cases out of 20 in this test fails without this patch. Bug: 1001664 Change-Id: I0e7746447f5e401837c2c28e308171f0987eba35
- Loading branch information
1 parent
23c6da7
commit 57dd7f3
Showing
1 changed file
with
82 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,82 @@ | ||
<!DOCTYPE html> | ||
<link rel="help" href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align" /> | ||
<link rel="author" href="mailto:kojii@chromium.org"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<style> | ||
section.test { | ||
display: inline-block; | ||
font-size: 20px; | ||
line-height: 1.5; | ||
font-family: Arial; | ||
font-family: Ahem; | ||
} | ||
section.test > div { | ||
background: blue; | ||
margin-bottom: 1em; | ||
} | ||
.filler { | ||
display: inline-block; | ||
background: cyan; | ||
height: 3em; | ||
width: 1em; | ||
} | ||
.target { | ||
display: inline-block; | ||
background: orange; | ||
width: 1em; | ||
height: 1em; | ||
} | ||
div.top, section.top .target { vertical-align: top; } | ||
div.text-top, section.text-top .target { vertical-align: text-top; } | ||
div.text-bottom, section.text-bottom .target { vertical-align: text-bottom; } | ||
div.bottom, section.bottom .target { vertical-align: bottom; } | ||
.test .fail { | ||
outline: red solid 5px; | ||
} | ||
</style> | ||
<body> | ||
<section class="test top"> | ||
<div><div class="filler"></div><div class="target" data-y="0"></div></div> | ||
<div><div class="filler top"></div><div class="target" data-y="0"></div></div> | ||
<div><div class="filler text-top"></div><div class="target" data-y="0"></div></div> | ||
<div><div class="filler bottom"></div><div class="target" data-y="0"></div></div> | ||
<div><div class="filler text-bottom"></div><div class="target" data-y="0"></div></div> | ||
</section> | ||
<section class="test text-top"> | ||
<div><div class="filler"></div><div class="target" data-y="44"></div></div> | ||
<div><div class="filler top"></div><div class="target" data-y="5"></div></div> | ||
<div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> | ||
<div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> | ||
<div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> | ||
</section> | ||
<section class="test text-bottom"> | ||
<div><div class="filler"></div><div class="target" data-y="44"></div></div> | ||
<div><div class="filler top"></div><div class="target" data-y="5"></div></div> | ||
<div><div class="filler text-top"></div><div class="target" data-y="5"></div></div> | ||
<div><div class="filler bottom"></div><div class="target" data-y="35"></div></div> | ||
<div><div class="filler text-bottom"></div><div class="target" data-y="40"></div></div> | ||
</section> | ||
<section class="test bottom"> | ||
<div><div class="filler"></div><div class="target" data-y="49"></div></div> | ||
<div><div class="filler top"></div><div class="target" data-y="40"></div></div> | ||
<div><div class="filler text-top"></div><div class="target" data-y="45"></div></div> | ||
<div><div class="filler bottom"></div><div class="target" data-y="40"></div></div> | ||
<div><div class="filler text-bottom"></div><div class="target" data-y="45"></div></div> | ||
</section> | ||
<script> | ||
for (let target of document.getElementsByClassName('target')) { | ||
let container = target.parentElement; | ||
let filler = container.firstElementChild; | ||
let section = container.parentElement; | ||
let pass = false; | ||
test(() => { | ||
let y = target.offsetTop - container.offsetTop; | ||
assert_approx_equals(y, target.dataset.y, 0); | ||
pass = true; | ||
}, `${section.className.substr(5)}+${filler.className.substr(7)}`); | ||
if (!pass) | ||
container.classList.add('fail'); | ||
} | ||
</script> | ||
</body> |