1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!doctype html>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://html.spec.whatwg.org/#the-textarea-element">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
<title>Textarea rows/cols size mapping in different writing modes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<textarea></textarea>
<script>
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl", "sideways-lr", "sideways-rl"]) {
if (!CSS.supports(`writing-mode: ${writingMode}`))
continue;
const isHorizontal = writingMode === "horizontal-tb";
const textarea = document.querySelector("textarea");
test(t => {
textarea.style.writingMode = writingMode;
t.add_cleanup(() => {
textarea.removeAttribute("style");
textarea.removeAttribute("rows");
});
const rowsDimension = isHorizontal ? "height" : "width";
const colsDimension = isHorizontal ? "width" : "height";
let previousRect = textarea.getBoundingClientRect();
textarea.rows = 10;
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
previousRect = textarea.getBoundingClientRect();
textarea.rows = 9;
assert_true(
textarea.getBoundingClientRect()[rowsDimension] < previousRect[rowsDimension],
`${rowsDimension} should decrease when decreasing rows`
);
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
previousRect = textarea.getBoundingClientRect();
textarea.rows = 11;
assert_true(
textarea.getBoundingClientRect()[rowsDimension] > previousRect[rowsDimension],
`${rowsDimension} should increase when increasing rows`
);
assert_equals(
textarea.getBoundingClientRect()[colsDimension],
previousRect[colsDimension],
`${colsDimension} shouldn't change when changing rows`
);
}, `textarea[style="writing-mode: ${writingMode}"] rows attribute changes the size correctly`);
test(t => {
textarea.style.writingMode = writingMode;
t.add_cleanup(() => {
textarea.removeAttribute("style");
textarea.removeAttribute("cols");
});
const rowsDimension = isHorizontal ? "height" : "width";
const colsDimension = isHorizontal ? "width" : "height";
let previousRect = textarea.getBoundingClientRect();
textarea.cols = 40;
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
previousRect = textarea.getBoundingClientRect();
textarea.cols = 30;
assert_true(
textarea.getBoundingClientRect()[colsDimension] < previousRect[colsDimension],
`${colsDimension} should decrease when decreasing cols`
);
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
previousRect = textarea.getBoundingClientRect();
textarea.cols = 50;
assert_true(
textarea.getBoundingClientRect()[colsDimension] > previousRect[colsDimension],
`${colsDimension} should increase when increasing cols`
);
assert_equals(
textarea.getBoundingClientRect()[rowsDimension],
previousRect[rowsDimension],
`${rowsDimension} shouldn't change when changing cols`
);
}, `textarea[style="writing-mode: ${writingMode}"] cols attribute changes the size correctly`);
};
</script>
|
