Skip to content

GitLab

T
tangled
Commit 1ff15e20 authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Chromium LUCI CQ
Browse files
Options

[@container] Update layout if necessary for getComputedStyle 

There is a plan to propagate a bit with the needed information on the
Node tree, but for now let's traverse the ancestor chain to figure out
if we're in a @container-dependent subtree or not.

Bug: 1145970
Change-Id: I27dfb0ff2fdb3947da3b5d2f78adab729ec63dcb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2636316
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Reviewed-by: default avatarXiaocheng Hu <xiaochengh@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845573}
parent b62e2b7e
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 1 deletion
third_party/blink/renderer/core/css/css_computed_style_declaration.cc
View file @ 1ff15e20
......@@ -38,6 +38,8 @@
#include "third_party/blink/renderer/core/css/style_engine.h"
#include "third_party/blink/renderer/core/css/zoom_adjusted_pixel_value.h"
#include "third_party/blink/renderer/core/dom/document.h"
#include "third_party/blink/renderer/core/dom/flat_tree_traversal.h"
#include "third_party/blink/renderer/core/dom/node_computed_style.h"
#include "third_party/blink/renderer/core/dom/pseudo_element.h"
#include "third_party/blink/renderer/core/frame/web_feature.h"
#include "third_party/blink/renderer/core/html/html_frame_owner_element.h"
......@@ -46,6 +48,7 @@
#include "third_party/blink/renderer/platform/bindings/exception_state.h"
#include "third_party/blink/renderer/platform/heap/heap.h"
#include "third_party/blink/renderer/platform/instrumentation/use_counter.h"
#include "third_party/blink/renderer/platform/runtime_enabled_features.h"
#include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
namespace blink {
......@@ -253,6 +256,21 @@ void LogUnimplementedPropertyID(const CSSProperty& property) {
<< property.GetPropertyName() << "'.";
}
// TODO(crbug.com/1167696): We probably want to avoid doing this for
// performance reasons.
bool InclusiveAncestorMayDependOnContainerQueries(Node* node) {
if (!RuntimeEnabledFeatures::CSSContainerQueriesEnabled())
return false;
for (Node& ancestor : FlatTreeTraversal::InclusiveAncestorsOf(*node)) {
const ComputedStyle* style = ancestor.GetComputedStyle();
// Since DependsOnContainerQueries is stored on ComputedStyle, we have to
// behave as if the flag is set for nullptr-styles (display:none).
if (!style || style->DependsOnContainerQueries())
return true;
}
return false;
}
} // namespace
const Vector<const CSSProperty*>&
......@@ -428,7 +446,8 @@ const CSSValue* CSSComputedStyleDeclaration::GetPropertyCSSValue(
LayoutObject* layout_object = StyledLayoutObject();
const ComputedStyle* style = ComputeComputedStyle();
if (property_class.IsLayoutDependent(style, layout_object)) {
if (property_class.IsLayoutDependent(style, layout_object) ||
InclusiveAncestorMayDependOnContainerQueries(styled_node)) {
document.UpdateStyleAndLayoutForNode(styled_node,
DocumentUpdateReason::kJavaScript);
styled_node = StyledNode();
......
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-003.html 0 → 100644
View file @ 1ff15e20
<!DOCTYPE html>
<title>Test that @container-dependent elements respond to container size changes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#container {
contain: size layout;
width: 200px;
height: 50px;
}
div { color: red; }
@container (min-width: 300px) {
div { color: green; }
}
</style>
<main id=container>
<div id=child>
Test
<p><span id=descendant>Deep</span></p>
</div>
</main>
<script>
test(function() {
assert_equals(getComputedStyle(child).color, 'rgb(255, 0, 0)');
container.style.width = '300px';
assert_equals(getComputedStyle(child).color, 'rgb(0, 128, 0)');
}, 'Children respond to changes in container size');
test(function() {
container.style = '';
assert_equals(getComputedStyle(descendant).color, 'rgb(255, 0, 0)');
container.style.width = '300px';
assert_equals(getComputedStyle(descendant).color, 'rgb(0, 128, 0)');
}, 'Descendants respond to changes in container size');
</script>
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-004.html 0 → 100644
View file @ 1ff15e20
<!DOCTYPE html>
<title>Test that @container-dependent elements respond to iframe size changes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
iframe {
width: 200px;
height: 40px;
}
</style>
<iframe id=iframe srcdoc="
<style>
div#container {
contain: size layout;
height: 20px;
}
div#child { color: red; }
@container (min-width: 300px) {
div#child { color: green; }
}
</style>
<div id=container>
<div id=child>Test</div>
</div>
"></iframe>
<script>
function waitForLoad(w) {
return new Promise(resolve => w.addEventListener('load', resolve));
}
promise_test(async () => {
await waitForLoad(window);
let inner_div = iframe.contentDocument.querySelector('div#child');
assert_equals(getComputedStyle(inner_div).color, 'rgb(255, 0, 0)');
iframe.style = 'width:400px';
assert_equals(getComputedStyle(inner_div).color, 'rgb(0, 128, 0)');
})
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment