Add support for overscroll-behavior logical longhands

Flow relative longhands have been added to overscroll-behavior specification [1]. This CL implements the relevant css parsing and matching tests. minor change: collapse all overscrollBehavior related case statements in parser fast path. intent-to-ship: https://groups.google.com/a/chromium.org/d/msg/blink-dev/V86fOkIaEQA/JydSaafqBwAJ [1] https://drafts.csswg.org/css-overscroll-behavior-1/#overscroll-behavior-longhands-logical TESTS: wpt/css/css-overscroll-behavior/ovescroll-behavior-logical.html, wpt/css/css-overscroll-behavior/parsing/* Bug: 833953 Change-Id: I5ceefa0afb1913472c0e134b2ec07405154abfae
web-platform-tests · Jul 8, 2019 · 38e8c30 · 38e8c30
1 parent 9e1ff30
commit 38e8c30
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 3 deletions.
diff --git a/css/css-overscroll-behavior/overscroll-behavior-logical.html b/css/css-overscroll-behavior/overscroll-behavior-logical.html
@@ -0,0 +1,49 @@
+<!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>
diff --git a/css/css-overscroll-behavior/parsing/overscroll-behavior-computed.html b/css/css-overscroll-behavior/parsing/overscroll-behavior-computed.html
@@ -6,6 +6,8 @@
 <link rel="help" href="https://drafts.csswg.org/css-overscroll-behavior/#overscroll-behavior-properties">
 <meta name="assert" content="overscroll-behavior-x computed value is as specified.">
 <meta name="assert" content="overscroll-behavior-y computed value is as specified.">
+<meta name="assert" content="overscroll-behavior-inline computed value is as specified.">
+<meta name="assert" content="overscroll-behavior-block computed value is as specified.">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="/css/support/computed-testcommon.js"></script>
@@ -14,7 +16,7 @@
 <div id="target"></div>
 <script>
 'use strict';
-for (let property of ["overscroll-behavior-x", "overscroll-behavior-y"]) {
+for (let property of ["overscroll-behavior-x", "overscroll-behavior-y", "overscroll-behavior-inline", "overscroll-behavior-block"]) {
   test_computed_value(property, "contain");
   test_computed_value(property, "none");
   test_computed_value(property, "auto");

diff --git a/css/css-overscroll-behavior/parsing/overscroll-behavior-invalid.html b/css/css-overscroll-behavior/parsing/overscroll-behavior-invalid.html
@@ -18,7 +18,7 @@
 test_invalid_value("overscroll-behavior", "contain contain contain");
 
 
-for (let property of ["overscroll-behavior-x", "overscroll-behavior-y"]) {
+for (let property of ["overscroll-behavior-x", "overscroll-behavior-y", "overscroll-behavior-inline", "overscroll-behavior-block"]) {
   test_invalid_value(property, "normal");
   test_invalid_value(property, "0");
   test_invalid_value(property, "contain contain");

diff --git a/css/css-overscroll-behavior/parsing/overscroll-behavior-valid.html b/css/css-overscroll-behavior/parsing/overscroll-behavior-valid.html
@@ -26,7 +26,7 @@
 test_valid_value("overscroll-behavior", "auto auto", "auto");
 
 
-for (let property of ["overscroll-behavior-x", "overscroll-behavior-y"]) {
+for (let property of ["overscroll-behavior-x", "overscroll-behavior-y", "overscroll-behavior-inline", "overscroll-behavior-block"]) {
   test_valid_value(property, "contain");
   test_valid_value(property, "none");
   test_valid_value(property, "auto");