[WIP] Add support for logical longhands for overscroll-behavior

Flow relative longhands have been added to overscroll-behavior. [1] TODO: This is not yet functional as I think we need to teach css parser to map inline/block to their physical counterparts x/y. Something similar to direction_aware_properties [2] but only on the axes. There may be other simpler way to do this. Currently this crashes in [3]. [1] https://drafts.csswg.org/css-overscroll-behavior-1/#overscroll-behavior-longhands-logical [2] https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/css_properties.json5?q=css_properties.json5&sq=package:chromium&dr&l=332 [3] Current crash: STDERR: [1:1:0516/112659.776302:FATAL:css_property_parser_helpers.cc(1928)] Check failed: shorthand.length() == 2u (4 vs. 2) STDERR: #0 0x7f40c88436b1 base::debug::CollectStackTrace() STDERR: #1 0x7f40c8593bfd base::debug::StackTrace::StackTrace() STDERR: #2 0x7f40c8593bb8 base::debug::StackTrace::StackTrace() STDERR: #3 0x7f40c85e2829 logging::LogMessage::~LogMessage() STDERR: #4 0x7f40b025e6bd blink::css_property_parser_helpers::ConsumeShorthandVia2Longhands() STDERR: #5 0x7f40b0331909 blink::css_shorthand::OverscrollBehavior::ParseShorthand() STDERR: #6 0x7f40b025782a blink::CSSPropertyParser::ParseValueStart() STDERR: #7 0x7f40b0256e35 blink::CSSPropertyParser::ParseValue() STDERR: #8 0x7f40b02456ec blink::CSSParserImpl::ConsumeDeclarationValue() STDERR: #9 0x7f40b02455be blink::CSSParserImpl::ParseValue() STDERR: #10 0x7f40b023956a blink::CSSParser::ParseValue() STDERR: #11 0x7f40b02394f4 blink::CSSParser::ParseValue() STDERR: #12 0x7f40b00ef77f blink::MutableCSSPropertyValueSet::SetProperty() STDERR: #13 0x7f40b004c5a9 blink::AbstractPropertySetCSSStyleDeclaration::SetPropertyInternal() Change-Id: I5ceefa0afb1913472c0e134b2ec07405154abfae
web-platform-tests · May 16, 2019 · 35b0196 · 35b0196
1 parent ffb5910
commit 35b0196
Show file tree

Hide file tree

Showing 4 changed files with 55 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,50 @@
+<!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>
+#horizontal, #vertical {
+  overscroll-behavior-block: contain;
+  overscroll-behavior-inline: none;
+}
+#horizontal {
+  writing-mode: horizontal-tb;
+}
+#vertical {
+  writing-mode: vertical-rl;
+}
+#horizontal_reversed {
+  writing-mode: horizontal-tb;
+  direction: rtl;
+}
+</style>
+<body>
+  <div id="horizontal"></div>
+  <div id="vertical"></div>
+  <div id="horizontal_reversed"></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() {
+  // mapping inline, block should not be affected by direction.
+  var element = document.getElementById("horizontal_reversed");
+  assert_equals(getComputedStyle(element).overscrollBehaviorX, "none");
+  assert_equals(getComputedStyle(element).overscrollBehaviorY, "contain");
+}, "Logical overscroll-behavior maps correctly when element has horizontal-tb writing mode with 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");