Add tests to check layout overflow recalc
This test check how an element with transform contribute
to the scrollable overflow of an inline element.
It also has a dynamic version, where the transform changes,
and we test that it's still contributing as expected
to the scrollable overflow.
The dynamic test won't pass if we don't recalc layout overflow properly
(see methods LayoutBlock::RecalcChildLayoutOverflow()
and LayoutBlockFlow::RecalcInlineChildrenLayoutOverflow()).
Change-Id: I7996534d72cb774eac0554a1b8eb6124560ce7ec
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2773220
Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Manuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#864440}
diff --git a/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-003.html b/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-003.html
new file mode 100644
index 0000000..bf6c635
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-003.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Inline Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that elements with transform contribute to the scrollable overflow on an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<style>
+ .container {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ overflow: auto;
+ background: silver;
+ border: solid thick;
+ }
+
+ .element {
+ width: 50px;
+ height: 50px;
+ background: lime;
+ }
+</style>
+<body onload="checkLayout('.container')">
+
+ <div class="container" style="top: 0px;" data-expected-scroll-width="250">
+ <div style="transform: translateX(200px);" class="element"></div>
+ </div>
+
+ <div class="container" style="top: 150px;" data-expected-scroll-height="350">
+ <div style="transform: translateY(300px);" class="element"></div>
+ </div>
+
+ <div class="container" style="top: 300px;" data-expected-scroll-width="250" data-expected-scroll-height="350">
+ <div style="transform: translate(200px, 300px);" class="element"></div>
+ </div>
+
+</body>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-003.html b/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-003.html
new file mode 100644
index 0000000..0a6d90b
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-overflow/scrollable-overflow-transform-dynamic-003.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Dynamic Inline Element</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on an inline element.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+ .container {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ overflow: auto;
+ background: silver;
+ border: solid thick;
+ }
+
+ .element {
+ width: 50px;
+ height: 50px;
+ background: lime;
+ }
+</style>
+
+<div id="container1" style="top: 0px;" class="container">
+ <div id="element1" style="transform: translateX(20px);" class="element"></div>
+</div>
+
+<div id="container2" style="top: 150px;" class="container">
+ <div id="element2" style="transform: translateY(30px);" class="element"></div>
+</div>
+
+<div id="container3" style="top: 300px;" class="container">
+ <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
+</div>
+
+<script>
+ test(() => {
+ assert_equals(container1.scrollWidth, 100);
+ element1.style.transform = "translateX(200px)";
+ assert_equals(container1.scrollWidth, 250);
+ }, "Check scrollWidth before and after transform chage");
+
+ test(() => {
+ assert_equals(container2.scrollHeight, 100);
+ element2.style.transform = "translateY(300px)";
+ assert_equals(container2.scrollHeight, 350);
+ }, "Check scrollHeight before and after transform chage");
+
+ test(() => {
+ assert_equals(container3.scrollWidth, 100);
+ assert_equals(container3.scrollHeight, 100);
+ element3.style.transform = "translate(200px, 300px)";
+ assert_equals(container3.scrollWidth, 250);
+ assert_equals(container3.scrollHeight, 350);
+ }, "Check scrollWidth and scrollHeight before and after transform chage");
+</script>
