Implement CSS Logical Properties: inline/block size

These properties provide the author with the ability to control layout through logical,
rather than physical, direction and dimension mappings.

Intent to Implement and Ship: CSS Logical Properties, Inline/Block size,
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/4qEXWptfVHs. This intent
is a followup for "Intent to Deprecate and Remove: -webkit-{min-,max-}logical-{width,height}",
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/VbPI65jBMIc.

When entire css-logical-props are implemented, will review these
-webkit-{min-,max-}logical-{width,height} and see if it is necessary to remove them.

Spec:
https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties
https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical

BUG=538475

Review-Url: https://codereview.chromium.org/2577363002
Cr-Commit-Position: refs/heads/master@{#441979}
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size-vlr.html b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size-vlr.html
new file mode 100644
index 0000000..139c199
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size-vlr.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/style-check.js"></script>
+
+<style>
+div {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#div1 {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#div2 {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#div3 {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#ref_div1 {
+  width: 40px;
+  min-width: 50px;
+  max-width: 100px;
+}
+#ref_div2 {
+  width: 100px;
+  min-width: 50px;
+  max-width: 100px;
+}
+#ref_div3 {
+  width: 120px;
+  min-width: 50px;
+  max-width: 100px;
+}
+
+p {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#p1 {
+  block-size: 100px;
+  width: 50px;
+}
+#p2 {
+  width: 50px;
+  block-size: 100px;
+}
+#ref_p1 {
+  width: 50px;
+}
+#ref_p2 {
+  width: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+  writing-mode: vertical-lr;
+}
+.tablecell {
+  display: table-cell;
+  writing-mode: vertical-lr;
+}
+#table1_cell {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: green;
+}
+#ref_table1_cell {
+  width: 40px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: red;
+}
+#ref_table2_cell {
+  width: 100px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+#ref_table3_cell {
+  width: 120px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="div1"></div>
+<div id="div2"></div>
+<div id="div3"></div>
+<div id="ref_div1"></div>
+<div id="ref_div2"></div>
+<div id="ref_div3"></div>
+
+<p id="p1"></div>
+<p id="p2"></div>
+<p id="ref_p1"></div>
+<p id="ref_p2"></div>
+
+<div class="table">
+  <div class="tablecell" id="table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table3_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table3_cell"></div>
+</div>
+
+<script>
+test(function () {
+  assert_true(compareWidthHeight("div1", "ref_div1"));
+  assert_true(compareWidthHeight("div2", "ref_div2"));
+  assert_true(compareWidthHeight("div3", "ref_div3"));
+}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in vertical-lr");
+
+test(function () {
+  assert_true(compareWidthHeight("p1", "ref_p1"));
+  assert_true(compareWidthHeight("p2", "ref_p2"));
+}, "Check that width override block-size and vice versa in vertical-lr");
+
+test(function () {
+  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
+  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
+  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
+}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table vertical-lr");
+</script>
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size.html b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size.html
new file mode 100644
index 0000000..eeb86e4
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-block-size.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}block-size</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/style-check.js"></script>
+
+<style>
+div {
+  border: 1px solid #000;
+}
+#div1 {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#div2 {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#div3 {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#ref_div1 {
+  height: 40px;
+  min-height: 50px;
+  max-height: 100px;
+}
+#ref_div2 {
+  height: 100px;
+  min-height: 50px;
+  max-height: 100px;
+}
+#ref_div3 {
+  height: 120px;
+  min-height: 50px;
+  max-height: 100px;
+}
+
+p {
+  border: 1px solid #000;
+}
+#p1 {
+  block-size: 100px;
+  height: 50px;
+}
+#p2 {
+  height: 50px;
+  block-size: 100px;
+}
+#ref_p1 {
+  height: 50px;
+}
+#ref_p2 {
+  height: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: green;
+}
+#ref_table1_cell {
+  height: 40px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: red;
+}
+#ref_table2_cell {
+  height: 100px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: blue;
+}
+#ref_table3_cell {
+  height: 120px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="div1"></div>
+<div id="div2"></div>
+<div id="div3"></div>
+<div id="ref_div1"></div>
+<div id="ref_div2"></div>
+<div id="ref_div3"></div>
+
+<p id="p1"></div>
+<p id="p2"></div>
+<p id="ref_p1"></div>
+<p id="ref_p2"></div>
+
+<div class="table">
+  <div class="tablecell" id="table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table3_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table3_cell"></div>
+</div>
+
+<script>
+test(function () {
+  assert_true(compareWidthHeight("div1", "ref_div1"));
+  assert_true(compareWidthHeight("div2", "ref_div2"));
+  assert_true(compareWidthHeight("div3", "ref_div3"));
+}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size");
+
+test(function () {
+  assert_true(compareWidthHeight("p1", "ref_p1"));
+  assert_true(compareWidthHeight("p2", "ref_p2"));
+}, "Check that height override block-size and vice versa");
+
+test(function () {
+  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
+  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
+  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
+}, "Check that block-size < min-block-size or min-block-size < block-size <= max-block-size or block-size > max-block-size in table");
+</script>
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size-vlr.html b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size-vlr.html
new file mode 100644
index 0000000..83e1548
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size-vlr.html
@@ -0,0 +1,167 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/style-check.js"></script>
+
+<style>
+div {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#div1 {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#div2 {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#div3 {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#ref_div1 {
+  height: 40px;
+  min-height: 50px;
+  max-height: 100px;
+}
+#ref_div2 {
+  height: 100px;
+  min-height: 50px;
+  max-height: 100px;
+}
+#ref_div3 {
+  height: 120px;
+  min-height: 50px;
+  max-height: 100px;
+}
+
+p {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#p1 {
+  inline-size: 100px;
+  height: 50px;
+}
+#p2 {
+  height: 50px;
+  inline-size: 100px;
+}
+#ref_p1 {
+  height: 50px;
+}
+#ref_p2 {
+  height: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+  writing-mode: vertical-lr;
+}
+.tablecell {
+  display: table-cell;
+  writing-mode: vertical-lr;
+}
+#table1_cell {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: green;
+}
+#ref_table1_cell {
+  height: 40px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: red;
+}
+#ref_table2_cell {
+  height: 100px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: blue;
+}
+#ref_table3_cell {
+  height: 120px;
+  min-height: 50px;
+  max-height: 100px;
+  width: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="div1"></div>
+<div id="div2"></div>
+<div id="div3"></div>
+<div id="ref_div1"></div>
+<div id="ref_div2"></div>
+<div id="ref_div3"></div>
+
+<p id="p1"></div>
+<p id="p2"></div>
+<p id="ref_p1"></div>
+<p id="ref_p2"></div>
+
+<div class="table">
+  <div class="tablecell" id="table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table3_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table3_cell"></div>
+</div>
+
+<script>
+test(function () {
+  assert_true(compareWidthHeight("div1", "ref_div1"));
+  assert_true(compareWidthHeight("div2", "ref_div2"));
+  assert_true(compareWidthHeight("div3", "ref_div3"));
+}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in vertical-lr");
+
+test(function () {
+  assert_true(compareWidthHeight("p1", "ref_p1"));
+  assert_true(compareWidthHeight("p2", "ref_p2"));
+}, "Check that height override inline-size and vice versa in vertical-lr");
+
+test(function () {
+  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
+  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
+  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
+}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table vertical-lr");
+</script>
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size.html b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size.html
new file mode 100644
index 0000000..c22dcef
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-inline-size.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}inline-size</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/style-check.js"></script>
+
+<style>
+div {
+  border: 1px solid #000;
+}
+#div1 {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#div2 {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#div3 {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#ref_div1 {
+  width: 40px;
+  min-width: 50px;
+  max-width: 100px;
+}
+#ref_div2 {
+  width: 100px;
+  min-width: 50px;
+  max-width: 100px;
+}
+#ref_div3 {
+  width: 120px;
+  min-width: 50px;
+  max-width: 100px;
+}
+
+p {
+  border: 1px solid #000;
+}
+#p1 {
+  inline-size: 100px;
+  width: 50px;
+}
+#p2 {
+  width: 50px;
+  inline-size: 100px;
+}
+#ref_p1 {
+  width: 50px;
+}
+#ref_p2 {
+  width: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: green;
+}
+#ref_table1_cell {
+  width: 40px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: red;
+}
+#ref_table2_cell {
+  width: 100px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: blue;
+}
+#ref_table3_cell {
+  width: 120px;
+  min-width: 50px;
+  max-width: 100px;
+  height: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="div1"></div>
+<div id="div2"></div>
+<div id="div3"></div>
+<div id="ref_div1"></div>
+<div id="ref_div2"></div>
+<div id="ref_div3"></div>
+
+<p id="p1"></div>
+<p id="p2"></div>
+<p id="ref_p1"></div>
+<p id="ref_p2"></div>
+
+<div class="table">
+  <div class="tablecell" id="table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="table3_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table1_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell" id="ref_table2_cell"></div>
+</div>
+<div class="table">
+  <div class="tablecell"  id="ref_table3_cell"></div>
+</div>
+
+<script>
+test(function () {
+  assert_true(compareWidthHeight("div1", "ref_div1"));
+  assert_true(compareWidthHeight("div2", "ref_div2"));
+  assert_true(compareWidthHeight("div3", "ref_div3"));
+}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size");
+
+test(function () {
+  assert_true(compareWidthHeight("p1", "ref_p1"));
+  assert_true(compareWidthHeight("p2", "ref_p2"));
+}, "Check that width override inline-size and vice versa");
+
+test(function () {
+  assert_true(compareWidthHeight("table1_cell", "ref_table1_cell"));
+  assert_true(compareWidthHeight("table2_cell", "ref_table2_cell"));
+  assert_true(compareWidthHeight("table3_cell", "ref_table3_cell"));
+}, "Check that inline-size < min-inline-size or min-inline-size < inline-size <= max-inline-size or inline-size > max-inline-size in table");
+</script>
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-quirklength.html b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-quirklength.html
new file mode 100644
index 0000000..98e9011
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/logicalprops-quirklength.html
@@ -0,0 +1,30 @@
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}block-size</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<style> #dummy {} </style>
+
+<script>
+function isValidDeclaration(cssText) {
+  var cssRule = document.styleSheets[0].cssRules[0];
+  cssRule.style = cssText;
+  var valid = (cssRule.style.length > 0);
+  cssRule.style = "";
+  return valid;
+}
+var tests = [
+  {cssText:"block-size: 1"},
+  {cssText:"min-block-size: 1"},
+  {cssText:"max-block-size: 1"},
+  {cssText:"inline-size: 1"},
+  {cssText:"min-inline-size: 1"},
+  {cssText:"max-inline-size: 1"},
+];
+tests.forEach(function(t) {
+  test(() => assert_false(isValidDeclaration(t.cssText)), "Check that unitless lengths are not valid for logical properties in quirks mode");
+});
+</script>
diff --git a/third_party/WebKit/LayoutTests/css3/logical-props/resources/style-check.js b/third_party/WebKit/LayoutTests/css3/logical-props/resources/style-check.js
new file mode 100644
index 0000000..cd129fd
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/css3/logical-props/resources/style-check.js
@@ -0,0 +1,9 @@
+"use strict";
+function compareWidthHeight(id1, id2) {
+  var element1 = document.getElementById(id1);
+  var style1 = getComputedStyle(element1);
+  var element2 = document.getElementById(id2);
+  var style2 = getComputedStyle(element2);
+  return (style1.width == style2.width) &&
+      (style1.height == style2.height)
+}
diff --git a/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt b/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
index 1131a5b..f4f541d 100644
--- a/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
+++ b/third_party/WebKit/LayoutTests/virtual/stable/webexposed/css-properties-as-js-properties-expected.txt
@@ -30,6 +30,7 @@
 backgroundRepeatY
 backgroundSize
 baselineShift
+blockSize
 border
 borderBottom
 borderBottomColor
@@ -153,6 +154,7 @@
 height
 hyphens
 imageRendering
+inlineSize
 isolation
 item
 justifyContent
@@ -178,10 +180,14 @@
 markerStart
 mask
 maskType
+maxBlockSize
 maxHeight
+maxInlineSize
 maxWidth
 maxZoom
+minBlockSize
 minHeight
+minInlineSize
 minWidth
 minZoom
 mixBlendMode
diff --git a/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt b/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
index b69e8ad..41ca12b 100644
--- a/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
+++ b/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
@@ -31,6 +31,7 @@
 backgroundRepeatY
 backgroundSize
 baselineShift
+blockSize
 border
 borderBottom
 borderBottomColor
@@ -158,6 +159,7 @@
 hyphens
 imageOrientation
 imageRendering
+inlineSize
 isolation
 item
 justifyContent
@@ -184,10 +186,14 @@
 mask
 maskSourceType
 maskType
+maxBlockSize
 maxHeight
+maxInlineSize
 maxWidth
 maxZoom
+minBlockSize
 minHeight
+minInlineSize
 minWidth
 minZoom
 mixBlendMode
diff --git a/third_party/WebKit/Source/core/css/CSSProperties.in b/third_party/WebKit/Source/core/css/CSSProperties.in
index 9221264..04b2366 100644
--- a/third_party/WebKit/Source/core/css/CSSProperties.in
+++ b/third_party/WebKit/Source/core/css/CSSProperties.in
@@ -475,6 +475,14 @@
 word-wrap inherited, name_for_methods=OverflowWrap
 z-index interpolable, type_name=int, custom_all
 
+// CSS logical props
+inline-size direction_aware
+block-size direction_aware
+min-inline-size direction_aware
+min-block-size direction_aware
+max-inline-size direction_aware
+max-block-size direction_aware
+
 // Non-standard direction aware properties
 
 -webkit-border-end-color direction_aware
diff --git a/third_party/WebKit/Source/core/css/CSSProperty.cpp b/third_party/WebKit/Source/core/css/CSSProperty.cpp
index 7df3a33..54fb651 100644
--- a/third_party/WebKit/Source/core/css/CSSProperty.cpp
+++ b/third_party/WebKit/Source/core/css/CSSProperty.cpp
@@ -226,29 +226,35 @@
     case CSSPropertyWebkitBorderAfterWidth:
       return resolveToPhysicalProperty(direction, writingMode, AfterSide,
                                        borderWidthShorthand());
+    case CSSPropertyInlineSize:
     case CSSPropertyWebkitLogicalWidth: {
       const CSSPropertyID properties[2] = {CSSPropertyWidth, CSSPropertyHeight};
       return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
     }
+    case CSSPropertyBlockSize:
     case CSSPropertyWebkitLogicalHeight: {
       const CSSPropertyID properties[2] = {CSSPropertyWidth, CSSPropertyHeight};
       return resolveToPhysicalProperty(writingMode, LogicalHeight, properties);
     }
+    case CSSPropertyMinInlineSize:
     case CSSPropertyWebkitMinLogicalWidth: {
       const CSSPropertyID properties[2] = {CSSPropertyMinWidth,
                                            CSSPropertyMinHeight};
       return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
     }
+    case CSSPropertyMinBlockSize:
     case CSSPropertyWebkitMinLogicalHeight: {
       const CSSPropertyID properties[2] = {CSSPropertyMinWidth,
                                            CSSPropertyMinHeight};
       return resolveToPhysicalProperty(writingMode, LogicalHeight, properties);
     }
+    case CSSPropertyMaxInlineSize:
     case CSSPropertyWebkitMaxLogicalWidth: {
       const CSSPropertyID properties[2] = {CSSPropertyMaxWidth,
                                            CSSPropertyMaxHeight};
       return resolveToPhysicalProperty(writingMode, LogicalWidth, properties);
     }
+    case CSSPropertyMaxBlockSize:
     case CSSPropertyWebkitMaxLogicalHeight: {
       const CSSPropertyID properties[2] = {CSSPropertyMaxWidth,
                                            CSSPropertyMaxHeight};
diff --git a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
index 0b1dbb4..b6bddae 100644
--- a/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
+++ b/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
@@ -3341,6 +3341,12 @@
 
     // Directional properties are resolved by resolveDirectionAwareProperty()
     // before the switch.
+    case CSSPropertyBlockSize:
+    case CSSPropertyInlineSize:
+    case CSSPropertyMaxBlockSize:
+    case CSSPropertyMaxInlineSize:
+    case CSSPropertyMinBlockSize:
+    case CSSPropertyMinInlineSize:
     case CSSPropertyWebkitBorderEnd:
     case CSSPropertyWebkitBorderEndColor:
     case CSSPropertyWebkitBorderEndStyle:
diff --git a/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp b/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
index 19b0fb2..d7c12f4 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSParserFastPaths.cpp
@@ -23,6 +23,10 @@
 static inline bool isSimpleLengthPropertyID(CSSPropertyID propertyId,
                                             bool& acceptsNegativeNumbers) {
   switch (propertyId) {
+    case CSSPropertyBlockSize:
+    case CSSPropertyInlineSize:
+    case CSSPropertyMinBlockSize:
+    case CSSPropertyMinInlineSize:
     case CSSPropertyFontSize:
     case CSSPropertyGridColumnGap:
     case CSSPropertyGridRowGap:
diff --git a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
index b4ebb79..1d6cbb4 100644
--- a/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
+++ b/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
@@ -3445,6 +3445,8 @@
     case CSSPropertyMaxWidth:
     case CSSPropertyMaxHeight:
       return consumeMaxWidthOrHeight(m_range, m_context, UnitlessQuirk::Allow);
+    case CSSPropertyMaxInlineSize:
+    case CSSPropertyMaxBlockSize:
     case CSSPropertyWebkitMaxLogicalWidth:
     case CSSPropertyWebkitMaxLogicalHeight:
       return consumeMaxWidthOrHeight(m_range, m_context);
@@ -3453,6 +3455,10 @@
     case CSSPropertyWidth:
     case CSSPropertyHeight:
       return consumeWidthOrHeight(m_range, m_context, UnitlessQuirk::Allow);
+    case CSSPropertyInlineSize:
+    case CSSPropertyBlockSize:
+    case CSSPropertyMinInlineSize:
+    case CSSPropertyMinBlockSize:
     case CSSPropertyWebkitMinLogicalWidth:
     case CSSPropertyWebkitMinLogicalHeight:
     case CSSPropertyWebkitLogicalWidth:
diff --git a/third_party/WebKit/Source/core/frame/UseCounter.cpp b/third_party/WebKit/Source/core/frame/UseCounter.cpp
index e8526fe..21d98b3 100644
--- a/third_party/WebKit/Source/core/frame/UseCounter.cpp
+++ b/third_party/WebKit/Source/core/frame/UseCounter.cpp
@@ -46,7 +46,7 @@
 }
 
 // Make sure update_use_counter_css.py was run which updates histograms.xml.
-constexpr int kMaximumCSSSampleId = 549;
+constexpr int kMaximumCSSSampleId = 555;
 
 }  // namespace
 
@@ -1067,6 +1067,18 @@
       return 548;
     case CSSPropertyFontVariationSettings:
       return 549;
+    case CSSPropertyInlineSize:
+      return 550;
+    case CSSPropertyBlockSize:
+      return 551;
+    case CSSPropertyMinInlineSize:
+      return 552;
+    case CSSPropertyMinBlockSize:
+      return 553;
+    case CSSPropertyMaxInlineSize:
+      return 554;
+    case CSSPropertyMaxBlockSize:
+      return 555;
     // 1. Add new features above this line (don't change the assigned numbers of
     // the existing items).
     // 2. Update kMaximumCSSSampleId with the new maximum value.
diff --git a/tools/metrics/histograms/histograms.xml b/tools/metrics/histograms/histograms.xml
index cb669bf..b6b4d92 100644
--- a/tools/metrics/histograms/histograms.xml
+++ b/tools/metrics/histograms/histograms.xml
@@ -95487,6 +95487,12 @@
   <int value="547" label="caret-color"/>
   <int value="548" label="offset-rotate"/>
   <int value="549" label="font-variation-settings"/>
+  <int value="550" label="inline-size"/>
+  <int value="551" label="block-size"/>
+  <int value="552" label="min-inline-size"/>
+  <int value="553" label="min-block-size"/>
+  <int value="554" label="max-inline-size"/>
+  <int value="555" label="max-block-size"/>
 </enum>
 
 <enum name="MappedEditingCommands" type="int">