| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Test flow-relative versions of overscroll-behavior properties</title> |
| <link rel="author" title="Majid Valipour"> |
| <link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior-1/#overscroll-behavior-longhands-logical"> |
| <link rel="help" href="https://drafts.csswg.org/css-logical/#box"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| div { |
| overscroll-behavior-block: contain; |
| overscroll-behavior-inline: none; |
| } |
| #horizontal { |
| writing-mode: horizontal-tb; |
| } |
| #vertical { |
| writing-mode: vertical-rl; |
| } |
| #horizontalreversed { |
| writing-mode: horizontal-tb; |
| direction: rtl; |
| } |
| </style> |
| <body> |
| <div id="horizontal"></div> |
| <div id="vertical"></div> |
| <div id="horizontalreversed"></div> |
| </body> |
| |
| <script> |
| test(function() { |
| var element = document.getElementById("horizontal"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorX, "none"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorY, "contain"); |
| }, "Logical overscroll-behavior maps correctly when element has horizontal-tb writing mode"); |
| |
| test(function() { |
| var element = document.getElementById("vertical"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorX, "contain"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorY, "none"); |
| }, "Logical overscroll-behavior maps correctly when element has vertical-rl writing mode"); |
| |
| test(function() { |
| var element = document.getElementById("horizontalreversed"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorX, "none"); |
| assert_equals(getComputedStyle(element).overscrollBehaviorY, "contain"); |
| }, "Logical overscroll-behavior maps correctly when element has horizontal-tb writing mode and is not affected by rtl direction"); |
| </script> |
