Bug 1632382 [wpt PR 23194] - [css-flexbox] Implement gap/gutters, a=t…

…estonly

Automatic update from web-platform-tests
[css-flexbox] Implement gap/gutters

This only works when you enable "Enable experimental web platform
features" in about:flags.

This patch doesn't implement a weird case that firefox supports:
resolving a percent column-gap when the flexbox's height is indefinite.
This patch resolves it to 0. We may wait until that is fixed before
exposing this to the web without the about:flag. The relevant test is
http://wpt.live/css/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-column-row-gap-004.html
The spec issue is w3c/csswg-drafts#4664.

This patch does not include the few engine-specific bits in legacy, so
gap only works in FlexNG.

Change-Id: I691889cf4b9346e94c83ef655dc9fd6eebca640d
Bug: 762679, 845235
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2162149
Commit-Queue: David Grogan <dgroganchromium.org>
Reviewed-by: Ian Kilpatrick <ikilpatrickchromium.org>
Reviewed-by: Christian Biesinger <cbiesingerchromium.org>
Cr-Commit-Position: refs/heads/master{#762264}

--

wpt-commits: 344e2aa99d6555e12d0003fb6cbf7abf0c5fd64a
wpt-pr: 23194

UltraBlame original commit: eb89edcb321e41cd109e4be74a30e043df6ba8e4

testing/web-platform/tests/css/css-flexbox/gap-001-lr-ref.html

@@ -88,10 +88,6 @@
 :
 flex
 ;
-gap
-:
-20px
-;
 }
 section
 >

testing/web-platform/tests/css/css-flexbox/gap-001-rl-ref.html

@@ -88,10 +88,6 @@
 :
 flex
 ;
-gap
-:
-20px
-;
 }
 section
 >

testing/web-platform/tests/css/css-flexbox/gap-001-rtl-ref.html

@@ -83,10 +83,6 @@
 :
 flex
 ;
-gap
-:
-20px
-;
 }
 section
 >

testing/web-platform/tests/css/css-flexbox/gap-002-lr-ref.html

@@ -94,10 +94,6 @@
 :
 column
 ;
-gap
-:
-20px
-;
 }
 section
 >

testing/web-platform/tests/css/css-flexbox/gap-002-rl-ref.html

@@ -94,10 +94,6 @@
 :
 column
 ;
-gap
-:
-20px
-;
 }
 section
 >

testing/web-platform/tests/css/css-flexbox/gap-011.html

@@ -0,0 +1,305 @@
+<
+!
+DOCTYPE
+html
+>
+<
+title
+>
+Flex
+gaps
+<
+/
+title
+>
+<
+link
+rel
+=
+"
+author
+"
+title
+=
+"
+David
+Grogan
+"
+href
+=
+"
+mailto
+:
+dgrogan
+chromium
+.
+org
+"
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+drafts
+.
+csswg
+.
+org
+/
+css
+-
+flexbox
+/
+#
+algo
+-
+line
+-
+break
+"
+>
+<
+link
+rel
+=
+"
+help
+"
+href
+=
+"
+https
+:
+/
+/
+drafts
+.
+csswg
+.
+org
+/
+css
+-
+align
+/
+#
+gaps
+"
+>
+<
+link
+rel
+=
+"
+match
+"
+href
+=
+"
+.
+.
+/
+reference
+/
+ref
+-
+filled
+-
+green
+-
+100px
+-
+square
+.
+xht
+"
+>
+<
+meta
+name
+=
+"
+assert
+"
+content
+=
+"
+Gaps
+are
+respected
+when
+gathering
+items
+into
+lines
+for
+row
+flexboxes
+.
+"
+/
+>
+<
+style
+>
+.
+item
+{
+width
+:
+100px
+;
+height
+:
+50px
+;
+flex
+:
+0
+0
+auto
+;
+background
+:
+green
+;
+}
+#
+reference
+-
+overlapped
+-
+red
+{
+position
+:
+absolute
+;
+background
+-
+color
+:
+red
+;
+width
+:
+100px
+;
+height
+:
+100px
+;
+z
+-
+index
+:
+-
+1
+;
+}
+<
+/
+style
+>
+<
+p
+>
+Test
+passes
+if
+there
+is
+a
+filled
+green
+square
+and
+<
+strong
+>
+no
+red
+<
+/
+strong
+>
+.
+<
+/
+p
+>
+<
+div
+id
+=
+reference
+-
+overlapped
+-
+red
+>
+<
+/
+div
+>
+<
+div
+style
+=
+"
+display
+:
+flex
+;
+width
+:
+200px
+;
+column
+-
+gap
+:
+50px
+;
+flex
+-
+flow
+:
+row
+wrap
+"
+>
+<
+div
+class
+=
+item
+>
+<
+/
+div
+>
+<
+div
+class
+=
+item
+>
+<
+/
+div
+>
+<
+/
+div
+>