| <!doctype html> |
| <meta charset="utf-8"> |
| <link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> |
| <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow"> |
| <title>File input writing mode computed style</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <input type="file" id="horizontal-input" style="writing-mode: horizontal-tb"> |
| <input type="file" id="vertical-lr-input" style="writing-mode: vertical-lr"> |
| <input type="file" id="vertical-rl-input" style="writing-mode: vertical-rl"> |
| |
| <script> |
| for (const element of document.querySelectorAll("[id^='horizontal-']")) { |
| test(() => { |
| const style = getComputedStyle(element); |
| const blockSize = parseInt(style.blockSize, 10); |
| const inlineSize = parseInt(style.inlineSize, 10); |
| assert_not_equals(blockSize, 0); |
| assert_not_equals(inlineSize, 0); |
| assert_greater_than(inlineSize, blockSize); |
| assert_equals(style.blockSize, style.height); |
| assert_equals(style.inlineSize, style.width); |
| }, `${element.id} block size should match height and inline size should match width`); |
| } |
| |
| for (const element of document.querySelectorAll("[id^='vertical-']")) { |
| test(() => { |
| const style = getComputedStyle(element); |
| const blockSize = parseInt(style.blockSize, 10); |
| const inlineSize = parseInt(style.inlineSize, 10); |
| assert_not_equals(blockSize, 0); |
| assert_not_equals(inlineSize, 0); |
| assert_greater_than(inlineSize, blockSize); |
| assert_equals(style.blockSize, style.width); |
| assert_equals(style.inlineSize, style.height); |
| }, `${element.id} block size should match width and inline size should match height`); |
| } |
| </script> |