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/fast | |
| 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/fast')
10 files changed, 149 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 |