| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <!-- https://wicg.github.io/overscroll-behavior/#overscroll-behavior-properties --> |
| |
| <style> |
| #container { |
| overscroll-behavior-x: none; |
| overscroll-behavior-y: contain; |
| } |
| #child { |
| overscroll-behavior: inherit; |
| } |
| </style> |
| <div id="container"> |
| <div id="child"></div> |
| </div> |
| <div id="target"></div> |
| |
| <script> |
| 'use strict'; |
| |
| test(function() { |
| assert_equals(getComputedStyle(document.body).overscrollBehavior, 'auto'); |
| assert_equals(getComputedStyle(container).overscrollBehavior, 'none contain'); |
| assert_equals(getComputedStyle(child).overscrollBehavior, 'none contain'); |
| }, "Test that getComputedStyle serializes overscroll-behavior-x and overscroll-behavior-y"); |
| |
| var values = [ |
| // single keyword |
| {input: 'contain', expected: 'contain'}, |
| {input: 'none', expected: 'none'}, |
| {input: 'auto', expected: 'auto'}, |
| |
| // two keywords |
| {input: 'contain none', expected: 'contain none'}, |
| {input: 'none auto', expected: 'none auto'}, |
| {input: 'auto contain', expected: 'auto contain'}, |
| ]; |
| |
| test(function() { |
| for (var value of values) { |
| target.style.overscrollBehavior = value.input; |
| assert_equals(getComputedStyle(target).overscrollBehavior, value.expected); |
| } |
| }, "Test that getComputedStyle serializes overscrollBehavior as per the spec"); |
| </script> |
