Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom-view/client-scroll-props-input.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<title>CSSOM View: client* and scroll* of an input exclude its inline padding</title>
<link rel="author" title="Free Debreuil" href="mailto:freedebreuil@google.com">
<meta name="assert" content="An input clips its text at the content box in the inline axis, so client* and scroll* leave the inline padding out.">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
/* 100px content box, 5px border, 20px inline padding, 10px block padding. */
input {
appearance: none;
box-sizing: content-box;
width: 100px;
height: 100px;
border: 5px solid;
padding-inline: 20px;
padding-block: 10px;
font: 10px/1 Ahem;
}
#vertical {
writing-mode: vertical-rl;
}
</style>
<input id="horizontal">
<input id="vertical">
<script>
// 30 Ahem glyphs, 300px of text.
const text = "X".repeat(30);
promise_test(async () => {
await document.fonts.ready;
const input = document.getElementById("horizontal");
input.value = text;
assert_equals(input.clientLeft, 25, "clientLeft is the border plus the inline padding");
assert_equals(input.clientTop, 5, "clientTop is the border");
assert_equals(input.clientWidth, 100, "clientWidth is the content box");
assert_equals(input.clientHeight, 120, "clientHeight is the padding box");
assert_equals(input.scrollWidth, 300, "scrollWidth is the text");
assert_equals(input.scrollHeight, 120, "scrollHeight is the padding box");
input.scrollLeft = 1000;
assert_equals(input.scrollLeft, 200, "scrollLeft reaches the end of the text (300 - 100)");
}, "horizontal writing mode");
promise_test(async () => {
await document.fonts.ready;
const input = document.getElementById("vertical");
input.value = text;
assert_equals(input.clientLeft, 5, "clientLeft is the border");
assert_equals(input.clientTop, 25, "clientTop is the border plus the inline padding");
assert_equals(input.clientWidth, 120, "clientWidth is the padding box");
assert_equals(input.clientHeight, 100, "clientHeight is the content box");
assert_equals(input.scrollWidth, 120, "scrollWidth is the padding box");
assert_equals(input.scrollHeight, 300, "scrollHeight is the text");
input.scrollTop = 1000;
assert_equals(input.scrollTop, 200, "scrollTop reaches the end of the text (300 - 100)");
}, "vertical writing mode");
</script>