mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
Improve position:fixed support in layout_2020
This makes it so that position:fixed elements do not scroll with the rest of the contents, but does not tackle the rest of the issues with their positioning.
This commit is contained in:
parent
20b8edc625
commit
63aae0178f
4 changed files with 84 additions and 0 deletions
|
@ -14,8 +14,10 @@ use mitochondria::OnceCell;
|
||||||
use net_traits::image_cache::UsePlaceholder;
|
use net_traits::image_cache::UsePlaceholder;
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
use style::computed_values::overflow_x::T as ComputedOverflow;
|
use style::computed_values::overflow_x::T as ComputedOverflow;
|
||||||
|
use style::computed_values::position::T as ComputedPosition;
|
||||||
use style::dom::OpaqueNode;
|
use style::dom::OpaqueNode;
|
||||||
use style::properties::ComputedValues;
|
use style::properties::ComputedValues;
|
||||||
|
|
||||||
use style::values::computed::{BorderStyle, Length, LengthPercentage};
|
use style::values::computed::{BorderStyle, Length, LengthPercentage};
|
||||||
use style::values::specified::ui::CursorKind;
|
use style::values::specified::ui::CursorKind;
|
||||||
use webrender_api::{self as wr, units};
|
use webrender_api::{self as wr, units};
|
||||||
|
@ -245,6 +247,7 @@ impl<'a> BuilderForBoxFragment<'a> {
|
||||||
|
|
||||||
fn build(&mut self, builder: &mut DisplayListBuilder) {
|
fn build(&mut self, builder: &mut DisplayListBuilder) {
|
||||||
builder.clipping_and_scrolling_scope(|builder| {
|
builder.clipping_and_scrolling_scope(|builder| {
|
||||||
|
self.adjust_spatial_id_for_positioning(builder);
|
||||||
self.build_hit_test(builder);
|
self.build_hit_test(builder);
|
||||||
self.build_background(builder);
|
self.build_background(builder);
|
||||||
self.build_border(builder);
|
self.build_border(builder);
|
||||||
|
@ -264,6 +267,18 @@ impl<'a> BuilderForBoxFragment<'a> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
fn adjust_spatial_id_for_positioning(&self, builder: &mut DisplayListBuilder) {
|
||||||
|
if self.fragment.style.get_box().position != ComputedPosition::Fixed {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO(mrobinson): Eventually this should use the spatial id of the reference
|
||||||
|
// frame that is the parent of this one once we have full support for stacking
|
||||||
|
// contexts and transforms.
|
||||||
|
builder.current_space_and_clip.spatial_id =
|
||||||
|
wr::SpatialId::root_reference_frame(builder.wr.pipeline_id);
|
||||||
|
}
|
||||||
|
|
||||||
fn build_scroll_frame_if_necessary(&self, builder: &mut DisplayListBuilder) {
|
fn build_scroll_frame_if_necessary(&self, builder: &mut DisplayListBuilder) {
|
||||||
let overflow_x = self.fragment.style.get_box().overflow_x;
|
let overflow_x = self.fragment.style.get_box().overflow_x;
|
||||||
let overflow_y = self.fragment.style.get_box().overflow_y;
|
let overflow_y = self.fragment.style.get_box().overflow_y;
|
||||||
|
|
|
@ -1,5 +1,14 @@
|
||||||
{
|
{
|
||||||
"items": {
|
"items": {
|
||||||
|
"conformancechecker": {
|
||||||
|
"css/position_fixed_scroll.html": []
|
||||||
|
},
|
||||||
|
"crashtest": {
|
||||||
|
"css/position_fixed_scroll.html": []
|
||||||
|
},
|
||||||
|
"manual": {
|
||||||
|
"css/position_fixed_scroll.html": []
|
||||||
|
},
|
||||||
"reftest": {
|
"reftest": {
|
||||||
"css/abs-overflow-stackingcontext.html": [
|
"css/abs-overflow-stackingcontext.html": [
|
||||||
[
|
[
|
||||||
|
@ -5057,6 +5066,18 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"css/position_fixed_scroll.html": [
|
||||||
|
[
|
||||||
|
"css/position_fixed_scroll.html",
|
||||||
|
[
|
||||||
|
[
|
||||||
|
"/_mozilla/css/position_fixed_scroll_ref.html",
|
||||||
|
"=="
|
||||||
|
]
|
||||||
|
],
|
||||||
|
{}
|
||||||
|
]
|
||||||
|
],
|
||||||
"css/position_fixed_simple_a.html": [
|
"css/position_fixed_simple_a.html": [
|
||||||
[
|
[
|
||||||
"css/position_fixed_simple_a.html",
|
"css/position_fixed_simple_a.html",
|
||||||
|
@ -8977,6 +8998,10 @@
|
||||||
"css/position_fixed_overflow_b.html": [
|
"css/position_fixed_overflow_b.html": [
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
"css/position_fixed_scroll.html": [],
|
||||||
|
"css/position_fixed_scroll_ref.html": [
|
||||||
|
[]
|
||||||
|
],
|
||||||
"css/position_fixed_simple_b.html": [
|
"css/position_fixed_simple_b.html": [
|
||||||
[]
|
[]
|
||||||
],
|
],
|
||||||
|
@ -11253,6 +11278,7 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
],
|
],
|
||||||
|
"css/position_fixed_scroll.html": [],
|
||||||
"css/stylesheet_media_queries.html": [
|
"css/stylesheet_media_queries.html": [
|
||||||
[
|
[
|
||||||
"css/stylesheet_media_queries.html",
|
"css/stylesheet_media_queries.html",
|
||||||
|
@ -12596,6 +12622,12 @@
|
||||||
{}
|
{}
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
"visual": {
|
||||||
|
"css/position_fixed_scroll.html": []
|
||||||
|
},
|
||||||
|
"wdspec": {
|
||||||
|
"css/position_fixed_scroll.html": []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"paths": {
|
"paths": {
|
||||||
|
@ -16959,6 +16991,14 @@
|
||||||
"a8947566153c187ba3191084f89d0163bc5b666e",
|
"a8947566153c187ba3191084f89d0163bc5b666e",
|
||||||
"support"
|
"support"
|
||||||
],
|
],
|
||||||
|
"css/position_fixed_scroll.html": [
|
||||||
|
"712265957f2c2ff0102eab09219b44bc5bf7f032",
|
||||||
|
"reftest"
|
||||||
|
],
|
||||||
|
"css/position_fixed_scroll_ref.html": [
|
||||||
|
"dc2e72a96ac2d82f038605812c79b9f78c1547dd",
|
||||||
|
"support"
|
||||||
|
],
|
||||||
"css/position_fixed_simple_a.html": [
|
"css/position_fixed_simple_a.html": [
|
||||||
"d01b955091107990d014e7f7be9c1181e5b06d66",
|
"d01b955091107990d014e7f7be9c1181e5b06d66",
|
||||||
"reftest"
|
"reftest"
|
||||||
|
|
17
tests/wpt/mozilla/tests/css/position_fixed_scroll.html
Normal file
17
tests/wpt/mozilla/tests/css/position_fixed_scroll.html
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel=match href=position_fixed_scroll_ref.html>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="height: 100px; width: 100px; background: green; position: fixed;"></div>
|
||||||
|
<div style="height: 5000px;"></div>
|
||||||
|
<script>
|
||||||
|
window.scrollTo(0, 100);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
12
tests/wpt/mozilla/tests/css/position_fixed_scroll_ref.html
Normal file
12
tests/wpt/mozilla/tests/css/position_fixed_scroll_ref.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div style="height: 100px; width: 100px; background: green;"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Add table
Add a link
Reference in a new issue