[css-layout-api] Re-add LayoutEdges.

This patch was created by reverting:
https://chromium-review.googlesource.com/c/chromium/src/+/1282724

And converting the tests to use promises, and switching the API to NG.

I run the patch against the mac-bots a few times to determine if I
could reproduced the flakiness which occurred initially to no avail.

Bug: 726125
Change-Id: I5f6197699977c03d3efbd4ca0926815faabee19d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1761372Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#689023}

third_party/blink/renderer/core/core_idl_files.gni

@@ -311,6 +311,7 @@ core_idl_files =
                     "intersection_observer/intersection_observer_entry.idl",
                     "invisible_dom/activate_invisible_event.idl",
                     "layout/ng/custom/layout_constraints.idl",
+                    "layout/ng/custom/layout_edges.idl",
                     "layout/ng/custom/layout_fragment.idl",
                     "layout/ng/custom/layout_child.idl",
                     "layout/ng/custom/layout_worklet_global_scope.idl",

third_party/blink/renderer/core/layout/BUILD.gn

@@ -283,6 +283,7 @@ blink_core_sources("layout") {
     "ng/custom/custom_layout_child.h",
     "ng/custom/custom_layout_constraints.cc",
     "ng/custom/custom_layout_constraints.h",
+    "ng/custom/custom_layout_edges.h",
     "ng/custom/custom_layout_fragment.cc",
     "ng/custom/custom_layout_fragment.h",
     "ng/custom/custom_layout_scope.cc",

third_party/blink/renderer/core/layout/ng/custom/css_layout_definition.cc

@@ -20,6 +20,7 @@
 #include "third_party/blink/renderer/core/inspector/console_message.h"
 #include "third_party/blink/renderer/core/layout/ng/custom/custom_layout_child.h"
 #include "third_party/blink/renderer/core/layout/ng/custom/custom_layout_constraints.h"
+#include "third_party/blink/renderer/core/layout/ng/custom/custom_layout_edges.h"
 #include "third_party/blink/renderer/core/layout/ng/custom/custom_layout_fragment.h"
 #include "third_party/blink/renderer/core/layout/ng/custom/custom_layout_scope.h"
 #include "third_party/blink/renderer/core/layout/ng/custom/fragment_result_options.h"
@@ -64,6 +65,7 @@ bool CSSLayoutDefinition::Instance::Layout(
     const Document& document,
     const NGBlockNode& node,
     const LogicalSize& border_box_size,
+    const NGBoxStrut& border_scrollbar_padding,
     CustomLayoutScope* custom_layout_scope,
     FragmentResultOptions* fragment_result_options,
     scoped_refptr<SerializedScriptValue>* fragment_result_data) {
@@ -89,8 +91,8 @@ bool CSSLayoutDefinition::Instance::Layout(
     children.push_back(layout_child);
   }
 
-  // TODO(ikilpatrick): Fill in layout edges.
-  ScriptValue edges(script_state, v8::Undefined(isolate));
+  CustomLayoutEdges* edges =
+      MakeGarbageCollected<CustomLayoutEdges>(border_scrollbar_padding);
 
   CustomLayoutConstraints* constraints =
       MakeGarbageCollected<CustomLayoutConstraints>(

third_party/blink/renderer/core/layout/ng/custom/css_layout_definition.h

@@ -19,6 +19,7 @@ class CustomLayoutScope;
 class FragmentResultOptions;
 struct LogicalSize;
 class NGBlockNode;
+struct NGBoxStrut;
 class NGConstraintSpace;
 class ScriptState;
 class SerializedScriptValue;
@@ -53,10 +54,11 @@ class CSSLayoutDefinition final
     // Runs the web developer defined layout, returns true if everything
     // succeeded. It populates the FragmentResultOptions dictionary, and
     // fragment_result_data.
-    bool Layout(const NGConstraintSpace& space,
-                const Document& document,
-                const NGBlockNode& node,
+    bool Layout(const NGConstraintSpace&,
+                const Document&,
+                const NGBlockNode&,
                 const LogicalSize& border_box_size,
+                const NGBoxStrut& border_scrollbar_padding,
                 CustomLayoutScope*,
                 FragmentResultOptions*,
                 scoped_refptr<SerializedScriptValue>* fragment_result_data);

third_party/blink/renderer/core/layout/ng/custom/custom_layout_edges.h

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef THIRD_PARTY_BLINK_RENDERER_CORE_LAYOUT_NG_CUSTOM_CUSTOM_LAYOUT_EDGES_H_
+#define THIRD_PARTY_BLINK_RENDERER_CORE_LAYOUT_NG_CUSTOM_CUSTOM_LAYOUT_EDGES_H_
+
+#include "third_party/blink/renderer/platform/bindings/script_wrappable.h"
+#include "third_party/blink/renderer/platform/geometry/layout_unit.h"
+
+namespace blink {
+
+// Represents the border, scrollbar, and padding edges given to the custom
+// layout.
+class CustomLayoutEdges : public ScriptWrappable {
+  DEFINE_WRAPPERTYPEINFO();
+
+ public:
+  CustomLayoutEdges(const NGBoxStrut& border_scrollbar_padding)
+      : inline_start_(border_scrollbar_padding.inline_start),
+        inline_end_(border_scrollbar_padding.inline_end),
+        block_start_(border_scrollbar_padding.block_start),
+        block_end_(border_scrollbar_padding.block_end) {}
+
+  // layout_edges.idl
+  double inlineStart() const { return inline_start_; }
+  double inlineEnd() const { return inline_end_; }
+  double blockStart() const { return block_start_; }
+  double blockEnd() const { return block_end_; }
+  double inlineSum() const { return inline_start_ + inline_end_; }
+  double blockSum() const { return block_start_ + block_end_; }
+
+ private:
+  double inline_start_;
+  double inline_end_;
+  double block_start_;
+  double block_end_;
+
+  DISALLOW_COPY_AND_ASSIGN(CustomLayoutEdges);
+};
+
+}  // namespace blink
+
+#endif  // THIRD_PARTY_BLINK_RENDERER_CORE_LAYOUT_NG_CUSTOM_CUSTOM_LAYOUT_EDGES_H_

third_party/blink/renderer/core/layout/ng/custom/layout_edges.idl

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// https://drafts.css-houdini.org/css-layout-api/#layoutedges
+
+[
+  Exposed=LayoutWorklet,
+  ImplementedAs=CustomLayoutEdges,
+  RuntimeEnabled=CSSLayoutAPI
+]
+interface LayoutEdges {
+  readonly attribute double inlineStart;
+  readonly attribute double inlineEnd;
+
+  readonly attribute double blockStart;
+  readonly attribute double blockEnd;
+
+  [ImplementedAs=inlineSum] readonly attribute double inline;
+  [ImplementedAs=blockSum] readonly attribute double block;
+};

third_party/blink/renderer/core/layout/ng/custom/layout_worklet_global_scope.idl

@@ -14,4 +14,4 @@
 
 // Blink-specific type for layout function
 // https://drafts.css-houdini.org/css-layout-api/#layout-definition-layout-function
-callback LayoutCallback = any (sequence<LayoutChild> children, any edges, LayoutConstraints constraints, StylePropertyMapReadOnly styleMap);
+callback LayoutCallback = any (sequence<LayoutChild> children, LayoutEdges edges, LayoutConstraints constraints, StylePropertyMapReadOnly styleMap);

third_party/blink/renderer/core/layout/ng/custom/ng_custom_layout_algorithm.cc

@@ -65,7 +65,8 @@ scoped_refptr<const NGLayoutResult> NGCustomLayoutAlgorithm::Layout() {
       FragmentResultOptions::Create();
   scoped_refptr<SerializedScriptValue> fragment_result_data;
   if (!instance->Layout(ConstraintSpace(), document, Node(),
-                        container_builder_.InitialBorderBoxSize(), &scope,
+                        container_builder_.InitialBorderBoxSize(),
+                        border_scrollbar_padding_, &scope,
                         fragment_result_options, &fragment_result_data)) {
     // TODO(ikilpatrick): Report this error to the developer.
     return FallbackLayout();

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/all-ref.html

+<!DOCTYPE html>
+<style>
+td { text-align: center; }
+
+.parent {
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+  border: solid;
+  border-width: 1px 2px 3px 4px;
+  padding: 0px 4px 8px 12px;
+  position: relative;
+}
+
+.child {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+
+.top-left {
+  top: 0;
+  left: 12px;
+}
+
+.top-right {
+  top: 0;
+  right: 4px;
+}
+
+.bottom-left {
+  bottom: 8px;
+  left: 12px;
+}
+
+.bottom-right {
+  bottom: 8px;
+  right: 4px;
+}
+</style>
+
+<table>
+  <tr>
+    <td></td>
+    <td colspan=2>LTR</td>
+    <td colspan=2>RTL</td>
+  </tr>
+  <tr>
+    <td></td>
+    <td>Y</td>
+    <td>X</td>
+    <td>Y</td>
+    <td>X</td>
+  </tr>
+  <tr>
+    <td>HTB</td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VRL</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VLR</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+</table>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/all.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="all-ref.html">
+<meta name="assert" content="This test checks that 'all' sizes are passed to the layout correctly." />
+<style>
+td { text-align: center; }
+
+.parent {
+  box-sizing: border-box;
+  width: 60px;
+  height: 60px;
+  border: solid;
+  border-width: 1px 2px 3px 4px;
+  padding: 0px 4px 8px 12px;
+  position: relative;
+  background: red;
+}
+
+@supports (display: layout(test)) {
+  .parent {
+    display: layout(test);
+    background: initial;
+  }
+}
+
+.child {
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+</style>
+<!--
+  This test works by placing four children in each corner of the layout using the edges.
+  The reference to this test uses absolute positioning to achieve the same effect.
+-->
+<table>
+  <tr>
+    <td></td>
+    <td colspan=2>LTR</td>
+    <td colspan=2>RTL</td>
+  </tr>
+  <tr>
+    <td></td>
+    <td>Y</td>
+    <td>X</td>
+    <td>Y</td>
+    <td>X</td>
+  </tr>
+  <tr>
+    <td>HTB</td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VRL</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VLR</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+</table>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script id="code" type="text/worklet">
+registerLayout('test', class {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints) {
+    const topLeftFragment = await children[0].layoutNextFragment();
+    const topRightFragment = await children[1].layoutNextFragment();
+    const bottomLeftFragment = await children[2].layoutNextFragment();
+    const bottomRightFragment = await children[3].layoutNextFragment();
+
+    topLeftFragment.inlineOffset = edges.inlineStart;
+    topLeftFragment.blockOffset = edges.blockStart;
+
+    topRightFragment.inlineOffset =
+        constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd;
+    topRightFragment.blockOffset = edges.blockStart;
+
+    bottomLeftFragment.inlineOffset = edges.inlineStart;
+    bottomLeftFragment.blockOffset =
+        constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd;
+
+    bottomRightFragment.inlineOffset =
+        constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd;
+    bottomRightFragment.blockOffset =
+        constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd;
+
+    return {childFragments: [
+        topLeftFragment,
+        topRightFragment,
+        bottomLeftFragment,
+        bottomRightFragment
+    ]};
+  }
+});
+</script>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-htb-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  width: 100px;
+
+  --edges-inline-start-expected: 8;
+  --edges-inline-end-expected: 20;
+  --edges-block-start-expected: 10;
+  --edges-block-end-expected: 0;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-htb.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  box-sizing: border-box;
+  width: 100px;
+
+  --edges-inline-start-expected: 20;
+  --edges-inline-end-expected: 8;
+  --edges-block-start-expected: 10;
+  --edges-block-end-expected: 0;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-vlr-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 0;
+  --edges-inline-end-expected: 10;
+  --edges-block-start-expected: 20;
+  --edges-block-end-expected: 8;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-vlr.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-lr;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 10;
+  --edges-inline-end-expected: 0;
+  --edges-block-start-expected: 20;
+  --edges-block-end-expected: 8;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-vrl-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 0;
+  --edges-inline-end-expected: 10;
+  --edges-block-start-expected: 8;
+  --edges-block-end-expected: 20;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/border-vrl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that border sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 10;
+  --edges-inline-end-expected: 0;
+  --edges-block-start-expected: 8;
+  --edges-block-end-expected: 20;
+
+  font-size: 8px;
+
+  border-color: transparent;
+  border-style: solid;
+  border-width: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-htb-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  width: 100px;
+
+  --edges-inline-start-expected: 8;
+  --edges-inline-end-expected: 20;
+  --edges-block-start-expected: 10;
+  --edges-block-end-expected: 0;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-htb.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: horizontal-tb;
+  background: red;
+  box-sizing: border-box;
+  width: 100px;
+
+  --edges-inline-start-expected: 20;
+  --edges-inline-end-expected: 8;
+  --edges-block-start-expected: 10;
+  --edges-block-end-expected: 0;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-vlr-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 0;
+  --edges-inline-end-expected: 10;
+  --edges-block-start-expected: 20;
+  --edges-block-end-expected: 8;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-vlr.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-lr;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 10;
+  --edges-inline-end-expected: 0;
+  --edges-block-start-expected: 20;
+  --edges-block-end-expected: 8;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-vrl-rtl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  direction: rtl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 0;
+  --edges-inline-end-expected: 10;
+  --edges-block-start-expected: 8;
+  --edges-block-end-expected: 20;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/padding-vrl.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="../green-square-ref.html">
+<meta name="assert" content="This test checks that padding sizes are passed to the layout correctly." />
+<style>
+.test {
+  writing-mode: vertical-rl;
+  background: red;
+  box-sizing: border-box;
+  height: 100px;
+
+  --edges-inline-start-expected: 10;
+  --edges-inline-end-expected: 0;
+  --edges-block-start-expected: 8;
+  --edges-block-end-expected: 20;
+
+  font-size: 8px;
+
+  padding: 10px 1em 0 20px;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    display: layout(test);
+    background: green;
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test"></div>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/edges.js'});
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/scrollbar-ref.html

+<!DOCTYPE html>
+<style>
+td { text-align: center; }
+
+.parent {
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  border: solid;
+  position: relative;
+}
+
+.child {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+
+.top-left {
+  top: 0;
+  left: 0;
+}
+
+.top-right {
+  top: 0;
+  right: 0;
+}
+
+.bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.bottom-right {
+  bottom: 0;
+  right: 0;
+}
+</style>
+
+<table>
+  <tr>
+    <td></td>
+    <td colspan=2>LTR</td>
+    <td colspan=2>RTL</td>
+  </tr>
+  <tr>
+    <td></td>
+    <td>Y</td>
+    <td>X</td>
+    <td>Y</td>
+    <td>X</td>
+  </tr>
+  <tr>
+    <td>HTB</td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VRL</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VLR</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
+        <div class="child top-left"></div>
+        <div class="child top-right"></div>
+        <div class="child bottom-left"></div>
+        <div class="child bottom-right"></div>
+      </div>
+    </td>
+  </tr>
+</table>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/scrollbar.https.html

+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutedges">
+<link rel="match" href="scrollbar-ref.html">
+<meta name="assert" content="This test checks that scrollbar sizes are passed to the layout correctly." />
+<style>
+td { text-align: center; }
+
+.parent {
+  box-sizing: border-box;
+  width: 50px;
+  height: 50px;
+  border: solid;
+  position: relative;
+  background: red;
+}
+
+@supports (display: layout(test)) {
+  .parent {
+    display: layout(test);
+    background: initial;
+  }
+}
+
+.child {
+  width: 10px;
+  height: 10px;
+  background: green;
+}
+</style>
+<!--
+  This test works by placing four children in each corner of the layout using the edges.
+  The reference to this test uses absolute positioning to achieve the same effect.
+-->
+<table>
+  <tr>
+    <td></td>
+    <td colspan=2>LTR</td>
+    <td colspan=2>RTL</td>
+  </tr>
+  <tr>
+    <td></td>
+    <td>Y</td>
+    <td>X</td>
+    <td>Y</td>
+    <td>X</td>
+  </tr>
+  <tr>
+    <td>HTB</td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: horizontal-tb; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VRL</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-rl; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+  <tr>
+    <td>VLR</td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: ltr; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-y: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+    <td>
+      <div class="parent" style="writing-mode: vertical-lr; direction: rtl; overflow-x: scroll;">
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+        <div class="child"></div>
+      </div>
+    </td>
+  </tr>
+</table>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+<script id="code" type="text/worklet">
+registerLayout('test', class {
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints) {
+    const topLeftFragment = await children[0].layoutNextFragment();
+    const topRightFragment = await children[1].layoutNextFragment();
+    const bottomLeftFragment = await children[2].layoutNextFragment();
+    const bottomRightFragment = await children[3].layoutNextFragment();
+
+    topLeftFragment.inlineOffset = edges.inlineStart;
+    topLeftFragment.blockOffset = edges.blockStart;
+
+    topRightFragment.inlineOffset =
+        constraints.fixedInlineSize - topRightFragment.inlineSize - edges.inlineEnd;
+    topRightFragment.blockOffset = edges.blockStart;
+
+    bottomLeftFragment.inlineOffset = edges.inlineStart;
+    bottomLeftFragment.blockOffset =
+        constraints.fixedBlockSize - bottomLeftFragment.blockSize - edges.blockEnd;
+
+    bottomRightFragment.inlineOffset =
+        constraints.fixedInlineSize - bottomRightFragment.inlineSize - edges.inlineEnd;
+    bottomRightFragment.blockOffset =
+        constraints.fixedBlockSize - bottomRightFragment.blockSize - edges.blockEnd;
+
+    return {childFragments: [
+        topLeftFragment,
+        topRightFragment,
+        bottomLeftFragment,
+        bottomRightFragment
+    ]};
+  }
+});
+</script>
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
+</script>

third_party/blink/web_tests/external/wpt/css/css-layout-api/edges/support/edges.js

+import {areArraysEqual} from '/common/arrays.js';
+
+function parseNumber(value) {
+  const num = parseInt(value.toString());
+  if (isNaN(num)) return 0;
+  return num;
+}
+
+registerLayout('test', class {
+  static get inputProperties() {
+    return [
+      '--edges-inline-start-expected',
+      '--edges-inline-end-expected',
+      '--edges-block-start-expected',
+      '--edges-block-end-expected',
+    ];
+  }
+
+  async intrinsicSizes() {}
+  async layout(children, edges, constraints, styleMap) {
+    const actual = this.constructor.inputProperties.map(
+      prop => parseNumber(styleMap.get(prop))
+    );
+
+    const expected = [
+      edges.inlineStart,
+      edges.inlineEnd,
+      edges.blockStart,
+      edges.blockEnd,
+    ];
+
+    if (!areArraysEqual(expected, actual)) {
+      return {autoBlockSize: 0, childFragments: []};
+    }
+
+    return {autoBlockSize: 100, childFragment: []};
+  }
+});