| <!doctype html> |
| <meta charset="utf-8"> |
| <title>Switch input writing mode computed style</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <input type=checkbox switch id=horizontal-input style="writing-mode: horizontal-tb"> |
| <input type=checkbox switch id=vertical-lr-input style="writing-mode: vertical-lr"> |
| <input type=checkbox switch 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> |
