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..c22dcefb
--- /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 7df3a339..54fb6514 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 b4ebb79b..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">
