html: rendering: Add tests for size, cols, and rows attributes
Change-Id: Id08898d3d5d60670ed0c0ba47b8be4865b9f8c32
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5196878
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Koji Ishii <kojii@chromium.org>
Auto-Submit: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1247064}
diff --git a/html/rendering/widgets/input-text-size.html b/html/rendering/widgets/input-text-size.html
new file mode 100644
index 0000000..7f29482
--- /dev/null
+++ b/html/rendering/widgets/input-text-size.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-input-element-as-a-text-entry-widget">
+<title>Test `size` attribute behaivor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<input id="missing">
+<input id="invalid" size="-1">
+<input id="size0" size="0">
+<input id="size1" size="1">
+<input id="size10" size="10">
+<input id="size20" size="20">
+<input id="size21" size="21">
+<input id="computed" style="border:none; padding:0;" size="19">
+
+<script>
+test(() => {
+ assert_equals(missing.offsetWidth, size20.offsetWidth);
+}, 'A misssing attribute is equivalent to size=20');
+
+test(() => {
+ assert_equals(invalid.offsetWidth, size20.offsetWidth, 'size="-1"');
+ assert_equals(size0.offsetWidth, size20.offsetWidth, 'size="0"');
+}, 'An invalid attribute value is equivalent to size=20');
+
+test(() => {
+ assert_less_than(size1.offsetWidth, size10.offsetWidth, '1 < 10');
+ assert_less_than(size10.offsetWidth, size20.offsetWidth, '10 < 20');
+ assert_less_than(size20.offsetWidth, size21.offsetWidth, '20 < 21');
+}, 'The width depends on a size attribute');
+
+test(() => {
+ const computedString = getComputedStyle(computed).width;
+ assert_equals(computed.offsetWidth,
+ parseInt(computedString.substring(0, computedString.length - 2)));
+}, 'Size attribute value affects computed style');
+</script>
+
diff --git a/html/rendering/widgets/textarea-cols-rows.html b/html/rendering/widgets/textarea-cols-rows.html
new file mode 100644
index 0000000..012c5aa
--- /dev/null
+++ b/html/rendering/widgets/textarea-cols-rows.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<link rel="help" href="https://html.spec.whatwg.org/C/#the-textarea-element-2">
+<title>Test `cols` `rows` attributes behaivor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+
+<textarea id="missing"></textarea>
+<textarea id="invalid" cols="-1" rows="-1"></textarea>
+<textarea id="computed" style="border:none; padding:0;" cols="19" rows="5"></textarea>
+
+<textarea id="cols0" cols="0"></textarea>
+<textarea id="cols1" cols="1"></textarea>
+<textarea id="cols10" cols="10"></textarea>
+<textarea id="cols20" cols="20"></textarea>
+<textarea id="cols21" cols="21"></textarea>
+
+<textarea id="rows0" rows="0"></textarea>
+<textarea id="rows1" rows="1"></textarea>
+<textarea id="rows2" rows="2"></textarea>
+<textarea id="rows3" rows="3"></textarea>
+
+<script>
+test(() => {
+ assert_equals(missing.offsetWidth, cols20.offsetWidth);
+ assert_equals(missing.offsetHeight, rows2.offsetHeight);
+}, 'A misssing attribute is equivalent to cols=20 rows=2');
+
+test(() => {
+ assert_equals(invalid.offsetWidth, cols20.offsetWidth);
+ assert_equals(invalid.offsetHeight, rows2.offsetHeight);
+ assert_equals(cols0.offsetWidth, cols20.offsetWidth);
+ assert_equals(rows0.offsetHeight, rows2.offsetHeight);
+}, 'An invalid attribute value is equivalent to cols=20 rows=2');
+
+test(() => {
+ assert_less_than(cols1.offsetWidth, cols10.offsetWidth, '1 < 10');
+ assert_less_than(cols10.offsetWidth, cols20.offsetWidth, '10 < 20');
+ assert_less_than(cols20.offsetWidth, cols21.offsetWidth, '20 < 21');
+}, 'The width depends on a cols attribute');
+
+test(() => {
+ assert_less_than(rows1.offsetHeight, rows2.offsetHeight, '1 < 2');
+ assert_less_than(rows2.offsetHeight, rows3.offsetHeight, '2 < 3');
+}, 'The height depends on a rows attribute');
+
+test(() => {
+ const computedWidth = getComputedStyle(computed).width;
+ assert_equals(computed.offsetWidth,
+ parseInt(computedWidth.substring(0, computedWidth.length - 2)));
+
+ const computedHeight = getComputedStyle(computed).height;
+ assert_equals(computed.offsetHeight,
+ parseInt(computedHeight.substring(0, computedHeight.length - 2)));
+}, 'Cols/rows attribute values affect computed style');
+</script>
+
