diff options
| author | leviw <leviw@chromium.org> | 2015-12-14 22:20:14 -0800 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2015-12-15 06:21:17 +0000 |
| commit | 472398196d9109be16d13f3af4e8c423ce45d2e3 (patch) | |
| tree | 2df9293326eadbf5937f943d65526348069c93da /third_party/WebKit/LayoutTests | |
| parent | ebf7a6b19a7a468195a5606fbd2bbd6d07a26ea2 (diff) | |
| download | chromium_src-472398196d9109be16d13f3af4e8c423ce45d2e3.zip chromium_src-472398196d9109be16d13f3af4e8c423ce45d2e3.tar.gz chromium_src-472398196d9109be16d13f3af4e8c423ce45d2e3.tar.bz2 | |
Implement Paint Containment
Paint containment acts as a containing block for all objects, including
fixed. It also clips them. It's also a formatting context and a
stacking context.
The approach in this patch differs from the spec in one very notable
way: it does not mess with the computed style of the overflow property.
This is a conscious decision I hope to work with Tab to address.
Paint Containment description from spec:
https://drafts.csswg.org/css-containment/#containment-paint
Intent to implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9W80Kw-z3ss
BUG=561713
Review URL: https://codereview.chromium.org/1490063002
Cr-Commit-Position: refs/heads/master@{#365178}
Diffstat (limited to 'third_party/WebKit/LayoutTests')
12 files changed, 224 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context-expected.txt b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context-expected.txt new file mode 100644 index 0000000..7ef22e9 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context-expected.txt @@ -0,0 +1 @@ +PASS diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context.html new file mode 100644 index 0000000..128a79b --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +div { + height: 100px; + width: 100%; +} +.container { + contain: paint; + border: 1px solid black; +} +.overhangingContainer { + height: 10px; +} +.overhangingFloat { + float: left; +} +</style> +<body> +<div class="overhangingContainer"><div class="overhangingFloat"></div></div> +<div class="container" data-offset-y=108></div> +<script src="../../../resources/check-layout.js"></script> +<script> +checkLayout(".container"); +</script>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position-expected.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position-expected.html new file mode 100644 index 0000000..b880446 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position-expected.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<body> +<div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position.html new file mode 100644 index 0000000..bac8d56 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 50px; +} +.container { + contain: paint; + background-color: green; +} +.absolute { + position: absolute; + top: 0px; + left: 100px; + background-color: red; +} +.inline { + display: inline-block; +} +</style> +<body> +<div class="container"><div class="absolute"></div></div> +<div class="container inline"><div class="absolute"></div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow-expected.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow-expected.html new file mode 100644 index 0000000..b880446 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow-expected.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<body> +<div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow.html new file mode 100644 index 0000000..ffa0f31 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; +} +#container { + contain: paint; +} +#child { + background-color: green; + -webkit-box-shadow: 0 0 100px 100px red; +} +</style> +<body> +<div id="container"><div id="child"></div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position-expected.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position-expected.html new file mode 100644 index 0000000..b880446 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position-expected.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<body> +<div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position.html new file mode 100644 index 0000000..f028d8c --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 50px; +} +.container { + contain: paint; + background-color: green; +} +.fixed { + position: fixed; + top: 0px; + left: 100px; + background-color: red; +} +.inline { + display: inline-block; +} +</style> +<body> +<div class="container"><div class="fixed"></div></div> +<div class="container inline"><div class="fixed"></div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant-expected.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant-expected.html new file mode 100644 index 0000000..b880446 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant-expected.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<body> +<div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant.html b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant.html new file mode 100644 index 0000000..d11d1821 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +div { + width: 100px; + height: 50px; +} +.container { + contain: paint; + background-color: green; +} +.transform { + background-color: red; + top: 100px; + transform: translateZ(0) scaleY(2) translateX(100px); +} +.inline { + display: inline-block; +} +</style> +<body> +<div class="container"><div class="transform"></div></div> +<div class="container inline"><div class="transform"></div></div>
\ No newline at end of file diff --git a/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest-expected.txt b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest-expected.txt new file mode 100644 index 0000000..7282117 --- /dev/null +++ b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest-expected.txt @@ -0,0 +1,12 @@ +Hit testing should respect clips established by contain: paint. + +PASS successfullyParsed is true + +TEST COMPLETE +PASS document.elementFromPoint(centerX, centerY).id is 'containTransform' +PASS document.elementFromPoint(centerX, centerY).id is 'containAbsolute' +PASS document.elementFromPoint(centerX, centerY).id is 'containFixed' +PASS document.elementFromPoint(centerX, centerY).id is 'body' +PASS document.elementFromPoint(centerX, centerY).id is 'body' +PASS document.elementFromPoint(centerX, centerY).id is 'body' + diff --git a/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html new file mode 100644 index 0000000..24f7bd1 --- /dev/null +++ b/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<script src="../resources/js-test.js"></script> +<script> +var centerX; +var centerY; +function hitTestCenterOfElement(elementID, expectedID) +{ + var element = document.getElementById(elementID); + var rect = element.getBoundingClientRect(); + centerX = rect.left + (rect.width / 2); + centerY = rect.top + (rect.height / 2); + shouldBe("document.elementFromPoint(centerX, centerY).id", "'" + expectedID + "'"); +} + +function test() { + hitTestCenterOfElement("containTransform", "containTransform"); + hitTestCenterOfElement("containAbsolute", "containAbsolute"); + hitTestCenterOfElement("containFixed", "containFixed"); + + hitTestCenterOfElement("transform", "body"); + hitTestCenterOfElement("absolute", "body"); + hitTestCenterOfElement("fixed", "body"); +} +</script> +<style> +div { + width: 100px; + height: 100px; + background-color: green; +} +div > div { + background-color: red; +} +.paintContainment { + contain: paint; + margin: 10px; +} +#transform { + transform: translateZ(0) translateX(100px); +} +#absolute { + position: absolute; + top: 0px; + left: 100px; +} +#fixed { + position: fixed; + top: 0px; + left: 100px; +} +</style> +<body onload="test()" id="body"> + <p>Hit testing should respect clips established by contain: paint.</p> +<div id="containTransform" class="paintContainment"> + <div id="transform"></div> +</div> +<div id="containAbsolute" class="paintContainment"> + <div id="absolute"></div> +</div> +<div id="containFixed" class="paintContainment"> + <div id="fixed"></div> +</div> +<pre id="console"></pre> |