blink: makes contain: paint honor overflow-clip-margin
This gives the same logic as that of 'overflow: clip.'
BUG=1159155
TEST=overflow-clip-margin-00[456].html
Change-Id: I1396fad5fbf4464daee8d021191797ba7d01856c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2596828
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Commit-Queue: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#841477}
diff --git a/css/css-overflow/overflow-clip-margin-004-ref.html b/css/css-overflow/overflow-clip-margin-004-ref.html
new file mode 100644
index 0000000..3cc79ed
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-004-ref.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<style>
+ .container {
+ display: flex;
+ }
+ .parent {
+ position: relative;
+ top: -10px;
+ left: -10px;
+ width: 120px;
+ height: 120px;
+ flex: none;
+ background-color: green;
+ }
+ .spacer {
+ flex: none;
+ height: 100px;
+ width: 100px;
+ }
+
+</style>
+<p>You should see two green squares touching each other. The one on the
+ right should be slightly larger.</p>
+<div class="spacer"></div>
+<div class="container">
+ <div class="spacer" style="background-color: green"></div>
+ <div class="parent"></div>
+</div>
diff --git a/css/css-overflow/overflow-clip-margin-004.html b/css/css-overflow/overflow-clip-margin-004.html
new file mode 100644
index 0000000..aab356f
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-004.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin extends outside bounds with contain: paint</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<link rel="match" href="overflow-clip-margin-004-ref.html">
+<style>
+ .container {
+ display: flex;
+ }
+ .parent {
+ width: 100px;
+ height: 100px;
+ flex: none;
+ contain: paint;
+ overflow-clip-margin: 10px;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ top: -50px;
+ left: -50px;
+ background-color: green;
+ }
+ .spacer {
+ flex: none;
+ height: 100px;
+ width: 100px;
+ }
+
+</style>
+<p>You should see two green squares touching each other. The one on the
+ right should be slightly larger.</p>
+<div class="spacer"></div>
+<div class="container">
+ <div class="spacer" style="width: 90px; background-color: green"></div>
+ <div class="spacer" style="width: 10px"></div>
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</div>
diff --git a/css/css-overflow/overflow-clip-margin-005-ref.html b/css/css-overflow/overflow-clip-margin-005-ref.html
new file mode 100644
index 0000000..84110e5
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-005-ref.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin impacts layout</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<style>
+ .scroller {
+ overflow: auto;
+ width: 100px;
+ height: 100px;
+ }
+ .child {
+ position: relative;
+ width: 110px;
+ height: 110px;
+ background-color: green;
+ }
+</style>
+<p>You should see a green box with scrollbars.</p>
+<div class="scroller">
+ <div class="child"></div>
+</div>
+
+<p>You should see a green box with scrollbars.</p>
+<div class="scroller">
+ <div class="child" style="width: 150px; height: 150px"></div>
+</div>
+
+<p>You should see a green box with no scrollbars.</p>
+<div class="scroller" style="background-color: green">
+</div>
diff --git a/css/css-overflow/overflow-clip-margin-005.html b/css/css-overflow/overflow-clip-margin-005.html
new file mode 100644
index 0000000..2d03a96
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-005.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin impacts layout</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<link rel="match" href="overflow-clip-margin-005-ref.html">
+<style>
+ .scroller {
+ overflow: auto;
+ width: 100px;
+ height: 100px;
+ }
+ .parent {
+ width: 100px;
+ height: 100px;
+ contain: paint;
+ overflow-clip-margin: 10px;
+ }
+ .child {
+ width: 200px;
+ height: 200px;
+ position: relative;
+ top: -50px;
+ left: -50px;
+ background-color: green;
+ }
+</style>
+<p>You should see a green box with scrollbars.</p>
+<div class="scroller">
+ <div class="parent">
+ <div class="child"></div>
+ </div>
+</div>
+
+<p>You should see a green box with scrollbars.</p>
+<div class="scroller">
+ <div class="parent" style="overflow-clip-margin: 100px">
+ <div class="child"></div>
+ </div>
+</div>
+
+<p>You should see a green box with no scrollbars.</p>
+<div class="scroller">
+ <div class="parent" style="background-color: green">
+ </div>
+</div>
diff --git a/css/css-overflow/overflow-clip-margin-006-ref.html b/css/css-overflow/overflow-clip-margin-006-ref.html
new file mode 100644
index 0000000..cf6b55a
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-006-ref.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin doesn't impact paint effects</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<style>
+ .parent {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ box-shadow: 20px 20px 5px red;
+ }
+</style>
+<p>You should see a green box with a red box shadow.
+<div class="parent"></div>
diff --git a/css/css-overflow/overflow-clip-margin-006.html b/css/css-overflow/overflow-clip-margin-006.html
new file mode 100644
index 0000000..493bcee
--- /dev/null
+++ b/css/css-overflow/overflow-clip-margin-006.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Verifies overflow-clip-margin doesn't impact paint effects</title>
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin">
+<link rel="author" title="Scott Violet" href="mailto:sky@chromium.org">
+<link rel="match" href="overflow-clip-margin-006-ref.html">
+<style>
+ .parent {
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ contain: paint;
+ overflow-clip-margin: 1px;
+ box-shadow: 20px 20px 5px red;
+ }
+</style>
+<p>You should see a green box with a red box shadow.
+<div class="parent"></div>
