Skip to content
Permalink
Browse files

Propagate the inner text field's baseline as the baseline for a numbe…

…r input.

Differential Revision: https://phabricator.services.mozilla.com/D48588

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1585216
gecko-commit: 106fddd0491636603c83208fdb5f953b8f360096
gecko-integration-branch: autoland
gecko-reviewers: dholbert
  • Loading branch information
MatsPalmgren authored and moz-wptsync-bot committed Oct 10, 2019
1 parent cc004e8 commit ce6cb41c73f8177acda9252ea037b4e85159747e
@@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset=utf-8>
<title>Reference baseline alignment of inline-grid with an INPUT type=number item</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
.grid {
display: inline-block;
line-height: 0;
border: 5px solid;
padding: 1px 0 3px 0;
margin: 11px 0;
}
input { -webkit-appearance:none; inline-size:4ch; }
.big {
font-size: 4em;
}
.small {
font-size: 0.2em;
}
.vlr { writing-mode: vertical-lr; }
</style>
</head>
<body>

<div>
<span class="big">B</span>
<div class="grid"><input type="number" value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" type="number" value="9"></div>
<span class="small">B</span>
</div>

<div class="vlr">
<div>
<span class="big">B</span>
<div class="grid"><input type="number" value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" type="number" value="9"></div>
<span class="small">B</span>
</div>
</div>

</body>
</html>
@@ -0,0 +1,63 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset=utf-8>
<title>Test baseline alignment of inline-grid with an INPUT type=number item</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-align/">
<link rel="match" href="grid-item-input-type-number-ref.html">
<style>
.grid {
display: inline-grid;
border: 5px solid;
padding: 1px 0 3px 0;
margin: 11px 0;
}
input { -webkit-appearance:none; inline-size:4ch; }
.big {
font-size: 4em;
}
.small {
font-size: 0.2em;
}
.vlr { writing-mode: vertical-lr; }
</style>
</head>
<body>

<div>
<span class="big">B</span>
<div class="grid"><input type="number" value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" type="number" value="9"></div>
<span class="small">B</span>
</div>

<div class="vlr">
<div>
<span class="big">B</span>
<div class="grid"><input type="number" value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" type="number" value="9"></div>
<span class="small">B</span>
</div>
</div>

</body>
</html>
@@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset=utf-8>
<title>Reference baseline alignment of inline-grid with an INPUT type=text item</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<style>
.grid {
display: inline-block;
line-height: 0;
border: 5px solid;
padding: 1px 0 3px 0;
margin: 11px 0;
}
input { -webkit-appearance:none; inline-size:4ch; }
.big {
font-size: 4em;
}
.small {
font-size: 0.2em;
}
.vlr { writing-mode: vertical-lr; }
</style>
</head>
<body>

<div>
<span class="big">B</span>
<div class="grid"><input value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" value="9"></div>
<span class="small">B</span>
</div>

<div class="vlr">
<div>
<span class="big">B</span>
<div class="grid"><input value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" value="9"></div>
<span class="small">B</span>
</div>
</div>

</body>
</html>
@@ -0,0 +1,63 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<meta charset=utf-8>
<title>Test baseline alignment of inline-grid with an INPUT type=text item</title>
<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-align/">
<link rel="match" href="grid-item-input-type-text-ref.html">
<style>
.grid {
display: inline-grid;
border: 5px solid;
padding: 1px 0 3px 0;
margin: 11px 0;
}
input { -webkit-appearance:none; inline-size:4ch; }
.big {
font-size: 4em;
}
.small {
font-size: 0.2em;
}
.vlr { writing-mode: vertical-lr; }
</style>
</head>
<body>

<div>
<span class="big">B</span>
<div class="grid"><input value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" value="9"></div>
<span class="small">B</span>
</div>

<div class="vlr">
<div>
<span class="big">B</span>
<div class="grid"><input value="9"></div>
<span class="small">B</span>
</div>

<div>
<span>B</span>
<div class="grid"><input class="big" value="9"></div>
<span class="small">B</span>
</div>
</div>

</body>
</html>

0 comments on commit ce6cb41

Please sign in to comment.
You can’t perform that action at this time.