forked from mirrors/gecko-dev
c5d72becb2
Automatic update from web-platform-tests [@property] Support viewport units in initial values Providing a non-empty CSSToLengthConversionData object in StyleBuilderConverter::ConvertRegisteredPropertyInitialValue ensures that viewport units resolve correctly. The bigger problem is invalidation: Viewport units in initial values has the same problem as viewport- dependent media queries: in Document::UpdateStyleAndLayoutTree, we need to layout the parent frame before we can update the style and layout tree of the current frame. Therefore this CL adds StyleEngine::HasViewportDependentPropertyRegistrations and makes a call to that function in ParentLayoutUpgrade::ShouldUpgrade. Secondly, we need to recalc the style of any element with the viewport-dependent initial values. This is in all likelihood almost all elements, so to cover this we simply invalidate the initial data and mark all elements for recalc (if appropriate) in StyleEngine:: InvalidateViewportUnitStylesIfNeeded. Fixed: 1339221 Change-Id: I482add0fa5f6cbfccede16ea182bb8143b3bb12c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3817528 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#1033414} -- wpt-commits: 1778186f8828edc9d604be1153fed55ea70ad2e3 wpt-pr: 35394
41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>@property: viewport units in initial value (dynamic)</title>
|
|
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#initial-value-descriptor" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
iframe {
|
|
width: 400px;
|
|
height: 200px;
|
|
}
|
|
</style>
|
|
<iframe id=iframe srcdoc="
|
|
<style>
|
|
@property --10vw { syntax: '<length>'; inherits: true; initial-value: 10vw}
|
|
@property --10vh { syntax: '<length>'; inherits: true; initial-value: 10vh}
|
|
div {
|
|
background: green;
|
|
width: var(--10vw);
|
|
height: var(--10vh);
|
|
}
|
|
</style>
|
|
<div style='width:10vw'></div>
|
|
"></iframe>
|
|
<script>
|
|
iframe.offsetTop;
|
|
|
|
function waitForLoad(w) {
|
|
return new Promise(resolve => w.addEventListener('load', resolve));
|
|
}
|
|
|
|
promise_test(async (t) => {
|
|
await waitForLoad(window);
|
|
let element = iframe.contentDocument.querySelector('div');
|
|
assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '40px');
|
|
assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px');
|
|
|
|
iframe.style.width = '100px';
|
|
assert_equals(getComputedStyle(element).getPropertyValue('--10vw'), '10px');
|
|
assert_equals(getComputedStyle(element).getPropertyValue('--10vh'), '20px');
|
|
});
|
|
</script>
|