Bug 1495812 [wpt PR 13318] - Align more closely with Gecko for clip-path reference box., a=testonly
authorMorten Stenshorne <mstensho@chromium.org>
Tue, 09 Oct 2018 04:13:20 +0000
changeset 488509 1c32e75346371ae46f30e3a14332736d310bb925
parent 488508 fac19da70365eef8f8ab927f154523b11a089104
child 488510 3b573a0ec2a1c250083bc0273f36b158408b5ffb
push id246
push userfmarier@mozilla.com
push dateSat, 13 Oct 2018 00:15:40 +0000
reviewerstestonly
bugs1495812, 13318, 641907, 1256808, 596110
milestone64.0a1
Bug 1495812 [wpt PR 13318] - Align more closely with Gecko for clip-path reference box., a=testonly Automatic update from web-platform-testsAlign more closely with Gecko for clip-path reference box. This changes how we calculate the reference box when the layout box is a non-atomic inline. It was very broken for LayoutNG; we just set the height to 0. For legacy layout we used the width of the bounding box for all lines and the height of the first fragment. Instead, consistently use the size of the first fragment, in both NG and legacy. Also get it right if writing-mode is vertical-rl. Bug: 641907 Cq-Include-Trybots: luci.chromium.try​:linux_layout_tests_layout_ng;luci.chromium.try​:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: I652f197bc3d950fad1bf6067dc5f38c2df72a0a3 Reviewed-on: https://chromium-review.googlesource.com/c/1256808 Reviewed-by: Fredrik Söderquist <fs@opera.com> Reviewed-by: Koji Ishii <kojii@chromium.org> Commit-Queue: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/master@{#596110} -- wpt-commits: 123dbad2221a34797cd146cbaeaff50c04c6dded wpt-pr: 13318
testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-001.html
testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-002.html
testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-003.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>clip-path on inline, horizontal-tb writing-mode</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta content="ahem" name="flags">
+<style>
+  .container {
+    writing-mode: horizontal-tb;
+    font: 100px/1 Ahem;
+    line-height: 100px;
+    color: red;
+  }
+  .container::first-letter {
+    color:green;
+  }
+  .container > span {
+    clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container">
+  <span>
+    XX<br>
+    XXX
+  </span>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-002.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>clip-path on inline, vertical-rl writing-mode</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta content="ahem" name="flags">
+<style>
+  .container {
+    writing-mode: vertical-rl;
+    margin-left: -100px;
+    font: 100px/1 Ahem;
+    line-height: 100px;
+    color: red;
+  }
+  .container::first-letter {
+    color:green;
+  }
+  .container > span {
+    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container">
+  <span>
+    XX<br>
+    XXX
+  </span>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip-path/clip-path-inline-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>clip-path on inline, vertical-lr writing-mode</title>
+<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-clip-path" title="5.1 Clipping Shape: the clip-path property">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta content="ahem" name="flags">
+<style>
+  .container {
+    writing-mode: vertical-lr;
+    font: 100px/1 Ahem;
+    line-height: 100px;
+    color: red;
+  }
+  .container::first-letter {
+    color:green;
+  }
+  .container > span {
+    clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="container">
+  <span>
+    XX<br>
+    XXX
+  </span>
+</div>