Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explicit inline-block height causes vertical misalignment #13707

Closed
pcwalton opened this issue Oct 12, 2016 · 0 comments
Closed

Explicit inline-block height causes vertical misalignment #13707

pcwalton opened this issue Oct 12, 2016 · 0 comments
Labels
A-layout/block A-layout/inline C-has-manual-testcase I-wrong An incorrect behaviour is observed.

Comments

@pcwalton
Copy link
Contributor

Breaks Google SERPs.

Minimal test case:

<!DOCTYPE html>
<div style="height: 35px; display: inline-block; background: lightgray">All</div>
<div style="display: inline-block; background: lightgray">Videos</div>
pcwalton added a commit to pcwalton/servo that referenced this issue Oct 12, 2016
@pcwalton
layout: Use the margin box for vertical positioning of inline-block
937faa0 
fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in servo#12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in servo#3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes servo#13707.
@pcwalton pcwalton mentioned this issue Oct 12, 2016
Merged
pcwalton added a commit to pcwalton/servo that referenced this issue Oct 12, 2016
@pcwalton
layout: Use the margin box for vertical positioning of inline-block
79de34b 
fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in servo#12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in servo#3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes servo#13707.
bors-servo pushed a commit that referenced this issue Oct 13, 2016
Auto merge of #13732 - pcwalton:inline-block-vertical-align-overflow,…
576aa97 
… r=notriddle

layout: Use the margin box for vertical positioning of `inline-block` fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in #12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in #3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes #13707.

r? @notriddle

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13732)
<!-- Reviewable:end -->
bors-servo pushed a commit that referenced this issue Oct 13, 2016
Auto merge of #13732 - pcwalton:inline-block-vertical-align-overflow,…
d465940 
… r=notriddle

layout: Use the margin box for vertical positioning of `inline-block` fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in #12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in #3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes #13707.

r? @notriddle

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13732)
<!-- Reviewable:end -->
pcwalton added a commit to pcwalton/servo that referenced this issue Oct 13, 2016
@pcwalton
layout: Use the margin box for vertical positioning of inline-block
c25dd2a 
fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in servo#12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in servo#3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes servo#13707.
bors-servo pushed a commit that referenced this issue Oct 13, 2016
Auto merge of #13732 - pcwalton:inline-block-vertical-align-overflow,…
bbcc743 
… r=notriddle

layout: Use the margin box for vertical positioning of `inline-block` fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in #12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in #3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes #13707.

r? @notriddle

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/13732)
<!-- Reviewable:end -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/block A-layout/inline C-has-manual-testcase I-wrong An incorrect behaviour is observed.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@pcwalton