Bug 1448441 [wpt PR 10161] - [css-layout-api] Allow developers to position fragments., a=testonly
authorIan Kilpatrick <ikilpatrick@chromium.org>
Mon, 09 Apr 2018 18:15:34 +0000
changeset 467190 a9a6d7d5e674c7010a1a58e68961cee651a57f27
parent 467189 c114530770d67bef7f077c0102ec8627b203c250
child 467191 3325454495c2e6d7233acc99fccf9a1a0ab219da
push id9165
push userasasaki@mozilla.com
push dateThu, 26 Apr 2018 21:04:54 +0000
treeherdermozilla-beta@064c3804de2e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1448441, 10161, 726125, 971832, 546018
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1448441 [wpt PR 10161] - [css-layout-api] Allow developers to position fragments., a=testonly Automatic update from web-platform-tests[css-layout-api] Allow developers to position fragments. This implements the LayoutFragment.inlineOffset and LayoutFragment.blockOffset attributes. The tests added simply re-create the reference by setting these two attributes in different text directions and writing modes. Change-Id: I1865403ca12e3b174738ee93320eae5ba16ac292 Bug: 726125 Reviewed-on: https://chromium-review.googlesource.com/971832 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#546018} wpt-commits: 8ec345bcd24282ce94960fc0b11ca057bec393be wpt-pr: 10161 wpt-commits: 8ec345bcd24282ce94960fc0b11ca057bec393be wpt-pr: 10161
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-layout-api/position-fragment-htb-ltr.https.html
testing/web-platform/tests/css/css-layout-api/position-fragment-htb-rtl.https.html
testing/web-platform/tests/css/css-layout-api/position-fragment-ref.html
testing/web-platform/tests/css/css-layout-api/position-fragment-vlr-ltr.https.html
testing/web-platform/tests/css/css-layout-api/position-fragment-vlr-rtl.https.html
testing/web-platform/tests/css/css-layout-api/position-fragment-vrl-ltr.https.html
testing/web-platform/tests/css/css-layout-api/position-fragment-vrl-rtl.https.html
testing/web-platform/tests/css/css-layout-api/support/layout-position-child-worklet.js
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -117948,16 +117948,88 @@
       [
        "/css/css-layout-api/layout-child-ref.html",
        "=="
       ]
      ],
      {}
     ]
    ],
+   "css/css-layout-api/position-fragment-htb-ltr.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-htb-ltr.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/position-fragment-htb-rtl.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-htb-rtl.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/position-fragment-vlr-ltr.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-vlr-ltr.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/position-fragment-vlr-rtl.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-vlr-rtl.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/position-fragment-vrl-ltr.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-vrl-ltr.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
+   "css/css-layout-api/position-fragment-vrl-rtl.https.html": [
+    [
+     "/css/css-layout-api/position-fragment-vrl-rtl.https.html",
+     [
+      [
+       "/css/css-layout-api/position-fragment-ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-layout-api/style-map-multi.https.html": [
     [
      "/css/css-layout-api/style-map-multi.https.html",
      [
       [
        "/css/css-layout-api/style-map-multi-ref.html",
        "=="
       ]
@@ -248499,16 +248571,21 @@
      {}
     ]
    ],
    "css/css-layout-api/layout-child-ref.html": [
     [
      {}
     ]
    ],
+   "css/css-layout-api/position-fragment-ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-layout-api/style-map-multi-ref.html": [
     [
      {}
     ]
    ],
    "css/css-layout-api/style-map-ref.html": [
     [
      {}
@@ -248519,16 +248596,21 @@
      {}
     ]
    ],
    "css/css-layout-api/support/layout-child-worklet.js": [
     [
      {}
     ]
    ],
+   "css/css-layout-api/support/layout-position-child-worklet.js": [
+    [
+     {}
+    ]
+   ],
    "css/css-lists/OWNERS": [
     [
      {}
     ]
    ],
    "css/css-lists/counter-7-ref.html": [
     [
      {}
@@ -503055,16 +503137,44 @@
   "css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html": [
    "3c3b4c800af40a85eb9ddb588a07fc0d8ceec5cf",
    "reftest"
   ],
   "css/css-layout-api/perform-child-layout-fixed-inline-size.https.html": [
    "a25a85095781de557edde6dd02b82ee052642bf1",
    "reftest"
   ],
+  "css/css-layout-api/position-fragment-htb-ltr.https.html": [
+   "761ed3e46d6485b1208953c292015432da5f99e0",
+   "reftest"
+  ],
+  "css/css-layout-api/position-fragment-htb-rtl.https.html": [
+   "8a2684c25ef3603e498cf33d32dc8a2c4b4a50d5",
+   "reftest"
+  ],
+  "css/css-layout-api/position-fragment-ref.html": [
+   "42b0dbfd4a950f8e72c2de942682565c91b06bd1",
+   "support"
+  ],
+  "css/css-layout-api/position-fragment-vlr-ltr.https.html": [
+   "afe6dc92c2d732a81ae2ca2c1747a12ef421c073",
+   "reftest"
+  ],
+  "css/css-layout-api/position-fragment-vlr-rtl.https.html": [
+   "9db1e576eabcfb88ab8fcee3355195533798a427",
+   "reftest"
+  ],
+  "css/css-layout-api/position-fragment-vrl-ltr.https.html": [
+   "c6c5f3c2d2adb96f140ab02f8ffa0ee1724c2f2b",
+   "reftest"
+  ],
+  "css/css-layout-api/position-fragment-vrl-rtl.https.html": [
+   "bfeb2a9f1c84ebe1423ca6b92d8751f5106f1275",
+   "reftest"
+  ],
   "css/css-layout-api/style-map-multi-ref.html": [
    "d33f700e795484641d3cc7db1c26e09dca952209",
    "support"
   ],
   "css/css-layout-api/style-map-multi.https.html": [
    "646cb60aeb21fe01c899219f273e6c72e5b12ba8",
    "reftest"
   ],
@@ -503079,16 +503189,20 @@
   "css/css-layout-api/support/layout-child-fixed-sizes-worklet.js": [
    "5ddda72e3c9d077508622511e8685249c7803028",
    "support"
   ],
   "css/css-layout-api/support/layout-child-worklet.js": [
    "87af0bfedbe9d4ea23e904edc5b22382a5d5d56c",
    "support"
   ],
+  "css/css-layout-api/support/layout-position-child-worklet.js": [
+   "7c05d553e6cba23d69bd40b9ad90e701440e9071",
+   "support"
+  ],
   "css/css-layout-api/supports.https.html": [
    "be6b57f5a85f99a64e755da22411ace3fba2992f",
    "testharness"
   ],
   "css/css-lists/OWNERS": [
    "d9c8054b356c9273a054a83abeb9be0626c23921",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-htb-ltr.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: horizontal-tb;
+  direction: ltr;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 5;
+  --block-offset: 25;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 50;
+  --block-offset: 60;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-htb-rtl.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: horizontal-tb;
+  direction: rtl;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 85;
+  --block-offset: 25;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 35;
+  --block-offset: 60;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<style>
+.result {
+  position: relative;
+  background: green;
+  width: 100px;
+  height: 100px;
+}
+
+.result-child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  position: absolute;
+  top: 25px;
+  left: 5px;
+}
+
+.result-child-2 {
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  position: absolute;
+  top: 60px;
+  left: 50px;
+}
+</style>
+<div class="result">
+  <div class="result-child-1"></div>
+  <div class="result-child-2"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-vlr-ltr.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: vertical-lr;
+  direction: ltr;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 25;
+  --block-offset: 5;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 60;
+  --block-offset: 50;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-vlr-rtl.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: vertical-lr;
+  direction: rtl;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 55;
+  --block-offset: 5;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 15;
+  --block-offset: 50;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-vrl-ltr.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  direction: ltr;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 25;
+  --block-offset: 85;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 60;
+  --block-offset: 35;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/position-fragment-vrl-rtl.https.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layoutfragment">
+<link rel="match" href="position-fragment-ref.html">
+<meta name="assert" content="This test checks that child fragments get positioned correctly." />
+<style>
+.test {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+
+.test {
+  writing-mode: vertical-rl;
+  direction: rtl;
+}
+
+.child-1 {
+  background: rebeccapurple;
+  width: 10px;
+  height: 20px;
+
+  --inline-offset: 55;
+  --block-offset: 85;
+}
+
+.child-2 {
+  writing-mode: vertical-rl;
+  background: rebeccapurple;
+  width: 15px;
+  height: 25px;
+
+  --inline-offset: 15;
+  --block-offset: 35;
+}
+
+@supports (display: layout(test)) {
+  .test {
+    background: green;
+    display: layout(test);
+  }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/worklet-reftest.js"></script>
+
+<div class="test">
+  <div class="child-1"></div>
+  <div class="child-2"></div>
+</div>
+
+<script>
+importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-position-child-worklet.js'});
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-layout-api/support/layout-position-child-worklet.js
@@ -0,0 +1,22 @@
+registerLayout('test', class {
+  static get childInputProperties() {
+    return [
+      '--inline-offset',
+      '--block-offset',
+    ];
+  }
+
+  *intrinsicSizes() {}
+  *layout(children, edges, constraints, styleMap) {
+    const childFragments = yield children.map((child) => {
+      return child.layoutNextFragment({});
+    });
+
+    for (let i = 0; i < children.length; i++) {
+      childFragments[i].inlineOffset = parseInt(children[i].styleMap.get('--inline-offset').toString());
+      childFragments[i].blockOffset = parseInt(children[i].styleMap.get('--block-offset').toString());
+    }
+
+    return {autoBlockSize: 0, childFragments};
+  }
+});