[css-logical] Fix computed style of logical size properties

Unlike 'width' and 'height', 'inline-size' and 'block-size' were not
considered to be layout dependent, and thus getComputedStyle could
provide a wrong value.

BUG=849855

TEST=external/wpt/css/css-logical/logical-box-size.html

The test still has some failures because sideways writing modes have not
been implemented yet (http://crbug.com/680331).

Change-Id: I4ee8ed8b2cd575fb3ddd5226b23c6a4bb843b81f
Reviewed-on: https://chromium-review.googlesource.com/1114966
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#570527}

third_party/WebKit/LayoutTests/external/wpt/css/css-logical/logical-box-size-expected.txt

 This is a testharness.js-based test.
-Found 93 tests; 40 PASS, 53 FAIL, 0 TIMEOUT, 0 NOTRUN.
+Found 93 tests; 57 PASS, 36 FAIL, 0 TIMEOUT, 0 NOTRUN.
 PASS Test that logical sizing properties are supported.
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: horizontal-tb; direction: ltr; ', inline-size expected "1px" but got "0px"
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: 'width' last on single declaration, 'writing-mode: horizontal-tb; direction: ltr; ', inline-size expected "3px" but got "1px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '. assert_equals: 'width', two declarations, 'writing-mode: horizontal-tb; direction: ltr; ', inline-size expected "3px" but got "1px"
+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: ltr; '.
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: ltr; '.
 PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: horizontal-tb; direction: rtl; '.
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: 'width' last on single declaration, 'writing-mode: horizontal-tb; direction: rtl; ', inline-size expected "3px" but got "1px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '. assert_equals: 'width', two declarations, 'writing-mode: horizontal-tb; direction: rtl; ', inline-size expected "3px" but got "1px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: rtl; ', inline-size expected "1px" but got "3px"
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: 'width' last on single declaration, 'writing-mode: vertical-rl; direction: rtl; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '. assert_equals: 'width', two declarations, 'writing-mode: vertical-rl; direction: rtl; ', inline-size expected "1px" but got "2px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', inline-size expected "1px" but got "3px"
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: horizontal-tb; direction: rtl; '.
+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: rtl; '.
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: rtl; '.
+FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: rtl; ', height expected "1px" but got "2px"
 FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: rtl; ', width expected "1px" but got "3px"
 FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: rtl; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-rl; direction: rtl; ', width expected "1px" but got "3px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-rl; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: 'width' last on single declaration, 'writing-mode: vertical-rl; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '. assert_equals: 'width', two declarations, 'writing-mode: vertical-rl; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', inline-size expected "1px" but got "3px"
+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-rl; direction: ltr; '.
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-rl; direction: ltr; '.
+FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-rl; direction: ltr; ', height expected "1px" but got "2px"
 FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-rl; direction: ltr; ', width expected "1px" but got "3px"
 FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-rl; direction: ltr; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-rl; direction: ltr; ', width expected "1px" but got "3px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: rtl; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: 'width' last on single declaration, 'writing-mode: vertical-lr; direction: rtl; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '. assert_equals: 'width', two declarations, 'writing-mode: vertical-lr; direction: rtl; ', inline-size expected "1px" but got "2px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', inline-size expected "1px" but got "3px"
+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: rtl; '.
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: rtl; '.
+FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: ltr; ', height expected "1px" but got "2px"
 FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: ltr; ', width expected "1px" but got "3px"
 FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: ltr; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-lr; direction: ltr; ', width expected "1px" but got "3px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: vertical-lr; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: 'width' last on single declaration, 'writing-mode: vertical-lr; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '. assert_equals: 'width', two declarations, 'writing-mode: vertical-lr; direction: ltr; ', inline-size expected "1px" but got "2px"
-FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', inline-size expected "1px" but got "3px"
+PASS Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: vertical-lr; direction: ltr; '.
+PASS Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
+PASS Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: vertical-lr; direction: ltr; '.
+FAIL Test that logical sizing properties share computed values with their physical associates, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: logical properties on one declaration, writing mode properties on another, 'writing-mode: sideways-lr; direction: rtl; ', height expected "1px" but got "2px"
 FAIL Test that sizing properties honor order of appearance when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'inline-size' last on single declaration, 'writing-mode: sideways-lr; direction: rtl; ', width expected "1px" but got "3px"
 FAIL Test that sizing properties honor selector specificty when both logical and physical associates are declared, with 'writing-mode: sideways-lr; direction: rtl; '. assert_equals: 'inline-size', two declarations, 'writing-mode: sideways-lr; direction: rtl; ', width expected "1px" but got "3px"
 PASS Test that logical max sizing properties are supported.

third_party/blink/renderer/core/css/CSSProperties.json5

@@ -4035,6 +4035,7 @@
     {
       name: "inline-size",
       property_methods: ["ParseSingleValue"],
+      layout_dependent: true,
       direction_aware_options: {
         logical_side: "width",
         shorthand_for_physical_side: "CSSProperty",
@@ -4045,6 +4046,7 @@
     {
       name: "block-size",
       property_methods: ["ParseSingleValue"],
+      layout_dependent: true,
       direction_aware_options: {
         logical_side: "height",
         shorthand_for_physical_side: "CSSProperty",

third_party/blink/renderer/core/css/properties/longhands/block_size_custom.cc

@@ -6,6 +6,7 @@
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
 #include "third_party/blink/renderer/core/css/properties/css_parsing_utils.h"
+#include "third_party/blink/renderer/core/layout/layout_object.h"
 
 namespace blink {
 namespace CSSLonghand {
@@ -17,5 +18,10 @@ const CSSValue* BlockSize::ParseSingleValue(
   return CSSParsingUtils::ConsumeWidthOrHeight(range, context);
 }
 
+bool BlockSize::IsLayoutDependent(const ComputedStyle* style,
+                                  LayoutObject* layout_object) const {
+  return layout_object && layout_object->IsBox();
+}
+
 }  // namespace CSSLonghand
 }  // namespace blink

third_party/blink/renderer/core/css/properties/longhands/inline_size_custom.cc

@@ -6,6 +6,7 @@
 
 #include "third_party/blink/renderer/core/css/parser/css_property_parser_helpers.h"
 #include "third_party/blink/renderer/core/css/properties/css_parsing_utils.h"
+#include "third_party/blink/renderer/core/layout/layout_object.h"
 
 namespace blink {
 namespace CSSLonghand {
@@ -17,5 +18,10 @@ const CSSValue* InlineSize::ParseSingleValue(
   return CSSParsingUtils::ConsumeWidthOrHeight(range, context);
 }
 
+bool InlineSize::IsLayoutDependent(const ComputedStyle* style,
+                                   LayoutObject* layout_object) const {
+  return layout_object && layout_object->IsBox();
+}
+
 }  // namespace CSSLonghand
 }  // namespace blink