From 687aa0845460e118b6277fe0ce47915978a2b1ff Mon Sep 17 00:00:00 2001 From: Manuel Rego Casasnovas Date: Sun, 1 Apr 2018 23:19:45 -0700 Subject: [PATCH] [css-grid] Fix resolution of percentage paddings and margins of grid items We were not resolving properly percentage paddings and margins for tracks that have something like minmax(auto, 100px). The reason was that while computing the minimum size of a grid item, the percentages were resolved against the inline size of the grid container. But for grid items we shouldn't never use the grid container size, but the grid area size, as that's their containing block. The patch modifies ContainingBlockLogicalWidthForContent() and ContainingBlockLogicalHeightForContent() in LayoutBox, so for grid items we return 0 if the area size hasn't been set yet. We never want to use the grid container's sizes in these cases. BUG=808758 TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-margins-* TEST=external/wpt/css/css-grid/grid-items/grid-items-percentage-paddings-* Change-Id: Ib142e51aee1fe623d38688469b179f01f82eb07b Reviewed-on: https://chromium-review.googlesource.com/980756 Reviewed-by: Javier Fernandez Commit-Queue: Manuel Rego Casasnovas Cr-Commit-Position: refs/heads/master@{#547417} --- .../grid-items-percentage-margins-001.html | 95 ++++++++++++++++++ .../grid-items-percentage-margins-002.html | 95 ++++++++++++++++++ ...ms-percentage-margins-vertical-lr-001.html | 96 +++++++++++++++++++ ...ms-percentage-margins-vertical-lr-002.html | 96 +++++++++++++++++++ ...ms-percentage-margins-vertical-rl-001.html | 96 +++++++++++++++++++ ...ms-percentage-margins-vertical-rl-002.html | 96 +++++++++++++++++++ .../grid-items-percentage-paddings-001.html | 95 ++++++++++++++++++ .../grid-items-percentage-paddings-002.html | 95 ++++++++++++++++++ ...s-percentage-paddings-vertical-lr-001.html | 96 +++++++++++++++++++ ...s-percentage-paddings-vertical-lr-002.html | 96 +++++++++++++++++++ ...s-percentage-paddings-vertical-rl-001.html | 96 +++++++++++++++++++ ...s-percentage-paddings-vertical-rl-002.html | 96 +++++++++++++++++++ 12 files changed, 1148 insertions(+) create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-002.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-002.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html create mode 100644 css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-001.html new file mode 100644 index 00000000000000..118440912de1d0 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-001.html @@ -0,0 +1,95 @@ + + +CSS Grid Layout Test: Grid items with percentage margins + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-002.html new file mode 100644 index 00000000000000..b056d3edf53105 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-002.html @@ -0,0 +1,95 @@ + + +CSS Grid Layout Test: Grid items with percentage margins + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html new file mode 100644 index 00000000000000..82df77ffca78a3 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-001.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage margins vertical-lr + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html new file mode 100644 index 00000000000000..168eeaf28c24cc --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-lr-002.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage margins vertical-lr + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html new file mode 100644 index 00000000000000..415a07df172431 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-001.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage margins vertical-rl + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html new file mode 100644 index 00000000000000..6f3db26275c82d --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-margins-vertical-rl-002.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage margins vertical-rl + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item margin-left: 50%;
+ +
+
X
+
+
+ +
Item margin-right: 50%;
+ +
+
X
+
+
+ +
Item margin-top: 50%;
+ +
+
X
+
+
+ +
Item margin-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-001.html b/css/css-grid/grid-items/grid-items-percentage-paddings-001.html new file mode 100644 index 00000000000000..3989d8f5c69a91 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-001.html @@ -0,0 +1,95 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-002.html b/css/css-grid/grid-items/grid-items-percentage-paddings-002.html new file mode 100644 index 00000000000000..a358b38b3d9775 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-002.html @@ -0,0 +1,95 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html new file mode 100644 index 00000000000000..21ed53a2c70811 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-001.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings vertical-lr + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html new file mode 100644 index 00000000000000..d4d8aa29d7ad79 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-lr-002.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings vertical-lr + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html new file mode 100644 index 00000000000000..010f4b5fbd2322 --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-001.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings vertical-rl + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
diff --git a/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html new file mode 100644 index 00000000000000..bf38155e16f26f --- /dev/null +++ b/css/css-grid/grid-items/grid-items-percentage-paddings-vertical-rl-002.html @@ -0,0 +1,96 @@ + + +CSS Grid Layout Test: Grid items with percentage paddings vertical-rl + + + + + + + + + + + +
+ +

Direction LTR

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+
+ +

Direction RTL

+ +
Item padding-left: 50%;
+ +
+
X
+
+
+ +
Item padding-right: 50%;
+ +
+
X
+
+
+ +
Item padding-top: 50%;
+ +
+
X
+
+
+ +
Item padding-bottom: 50%;
+ +
+
X
+
+