-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Bug 969874: Make scrollable frames derive their baseline from their s…
…crolled content (unless their display value is block-inside). r=mats Before this patch, we made scrollable frames derive their baseline from their margin-box, because that's what the spec requires for scrollable inline-block boxes. However, the spec now singles out inline-block as a special case, and other sorts of scrollable inline-level containers are supposed to derive their baseline from the scrolled content. So, this patch makes us do that, with an exception for scrollable inline-block boxes. For more info about the block-inside special case, see the end of the "block containers" chunk here: https://drafts.csswg.org/css-align/#baseline-export (Though that spec text may be a bit too specific, per my spec issue at w3c/csswg-drafts#3611 -- that's why this patch checks for block-inside rather than inline-block.) Differential Revision: https://phabricator.services.mozilla.com/D18481 --HG-- extra : moz-landing-system : lando
- Loading branch information
Showing
5 changed files
with
207 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
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
58 changes: 58 additions & 0 deletions
58
testing/web-platform/tests/css/css-align/baseline-of-scrollable-1a.html
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,58 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title> | ||
CSS Test: baseline of scrollable element should be taken from its | ||
contents. (Except if the scrollable element is an inline-block, which gets | ||
baseline from its margin-box.) | ||
</title> | ||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> | ||
<link rel="match" href="reference/baseline-of-scrollable-1-ref.html"> | ||
<style> | ||
.container { | ||
overflow: hidden; | ||
height: 50px; | ||
width: 100px; | ||
border-style: solid; | ||
border-width: 2px 3px 4px 5px; | ||
padding: 4px 5px 7px 8px; | ||
margin: 1px 2px 3px 4px; | ||
} | ||
.inline-block { | ||
display: inline-block; | ||
} | ||
.inline-flex { | ||
display: inline-flex; | ||
} | ||
.inline-grid { | ||
display: inline-grid; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
Test passes if the a/b text aligns with the bottom margin-edge of the "block" | ||
rect and baseline-aligns with the "flex" and "grid" text. | ||
<br><br> | ||
|
||
<!-- Note: for this first "inline-block" case, the element's baseline is | ||
synthesized from its margin box. For the other cases, the element's | ||
baseline is taken from its contents, i.e. the text inside of it. --> | ||
a | ||
<div class="container inline-block">block</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="container inline-flex">flex</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="container inline-grid">grid</div> | ||
b | ||
|
||
</body> | ||
</html> |
67 changes: 67 additions & 0 deletions
67
testing/web-platform/tests/css/css-align/baseline-of-scrollable-1b.html
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,67 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title> | ||
CSS Test: baseline of scrollable element (for use by a parent inline-block) | ||
should be taken from its contents. (Except if the scrollable element is a | ||
block, which gets baseline from its margin-box.) | ||
</title> | ||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> | ||
<link rel="match" href="reference/baseline-of-scrollable-1-ref.html"> | ||
<style> | ||
.container { | ||
overflow: hidden; | ||
height: 50px; | ||
width: 100px; | ||
border-style: solid; | ||
border-width: 2px 3px 4px 5px; | ||
padding: 4px 5px 7px 8px; | ||
margin: 1px 2px 3px 4px; | ||
} | ||
.inline-block { | ||
display: inline-block; | ||
} | ||
.block { | ||
display: block; | ||
} | ||
.flex { | ||
display: flex; | ||
} | ||
.grid { | ||
display: grid; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
Test passes if the a/b text aligns with the bottom margin-edge of the "block" | ||
rect and baseline-aligns with the "flex" and "grid" text. | ||
<br><br> | ||
|
||
<!-- Note: for this first "inline-block" case, the element's baseline is | ||
synthesized from its margin box. For the other cases, the element's | ||
baseline is taken from its contents, i.e. the text inside of it. --> | ||
a | ||
<div class="inline-block"> | ||
<div class="container block">block</div> | ||
</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="inline-block"> | ||
<div class="container flex">flex</div> | ||
</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="inline-block"> | ||
<div class="container grid">grid</div> | ||
</div> | ||
b | ||
|
||
</body> | ||
</html> |
58 changes: 58 additions & 0 deletions
58
testing/web-platform/tests/css/css-align/reference/baseline-of-scrollable-1-ref.html
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,58 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title> | ||
CSS Reference Case | ||
</title> | ||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> | ||
<link rel="author" title="Mozilla" href="https://www.mozilla.org"> | ||
<link rel="help" href="https://drafts.csswg.org/css-align/#baseline-export"> | ||
<style> | ||
.container { | ||
/* In this reference case, we leave 'overflow' at its initial value. */ | ||
height: 50px; | ||
width: 100px; | ||
border-style: solid; | ||
border-width: 2px 3px 4px 5px; | ||
padding: 4px 5px 7px 8px; | ||
margin: 1px 2px 3px 4px; | ||
} | ||
.inline-block { | ||
display: inline-block; | ||
} | ||
.inline-flex { | ||
display: inline-flex; | ||
} | ||
.inline-grid { | ||
display: inline-grid; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
Test passes if the a/b text aligns with the bottom margin-edge of the "block" | ||
rect and baseline-aligns with the "flex" and "grid" text. | ||
<br><br> | ||
|
||
<!-- Note: for this first "inline-block" case, we take the inner text out of | ||
flow, to force the inline-block to synthesize its baseline from its | ||
margin box. (This is how the corresponding piece of the testcase is | ||
supposed to render). --> | ||
a | ||
<div class="container inline-block"> | ||
<div style="position: absolute">block</div> | ||
</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="container inline-flex">flex</div> | ||
b | ||
<br> | ||
|
||
a | ||
<div class="container inline-grid">grid</div> | ||
b | ||
|
||
</body> | ||
</html> |