Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 22:15:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Improve position:fixed support in layout_2020

Browse source 
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:
Martin Robinson 2020-02-10 09:19:01 +01:00
parent 20b8edc625
commit 63aae0178f
4 changed files with 84 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

15
components/layout_2020/display_list/mod.rs
View file

@ -14,8 +14,10 @@ use mitochondria::OnceCell;
use net_traits::image_cache::UsePlaceholder;
use std::sync::Arc;
use style::computed_values::overflow_x::T as ComputedOverflow;
use style::computed_values::position::T as ComputedPosition;
use style::dom::OpaqueNode;
use style::properties::ComputedValues;
use style::values::computed::{BorderStyle, Length, LengthPercentage};
use style::values::specified::ui::CursorKind;
use webrender_api::{self as wr, units};
@ -245,6 +247,7 @@ impl<'a> BuilderForBoxFragment<'a> {
fn build(&mut self, builder: &mut DisplayListBuilder) {
builder.clipping_and_scrolling_scope(|builder| {
self.adjust_spatial_id_for_positioning(builder);
self.build_hit_test(builder);
self.build_background(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) {
let overflow_x = self.fragment.style.get_box().overflow_x;
let overflow_y = self.fragment.style.get_box().overflow_y;

40
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -1,5 +1,14 @@
{
"items": {
"conformancechecker": {
"css/position_fixed_scroll.html": []
},
"crashtest": {
"css/position_fixed_scroll.html": []
},
"manual": {
"css/position_fixed_scroll.html": []
},
"reftest": {
"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",
@ -8977,6 +8998,10 @@
"css/position_fixed_overflow_b.html": [
[]
],
"css/position_fixed_scroll.html": [],
"css/position_fixed_scroll_ref.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",
@ -12596,6 +12622,12 @@
{}
]
]
},
"visual": {
"css/position_fixed_scroll.html": []
},
"wdspec": {
"css/position_fixed_scroll.html": []
}
},
"paths": {
@ -16959,6 +16991,14 @@
"a8947566153c187ba3191084f89d0163bc5b666e",
"support"
],
"css/position_fixed_scroll.html": [
"712265957f2c2ff0102eab09219b44bc5bf7f032",
"reftest"
],
"css/position_fixed_scroll_ref.html": [
"dc2e72a96ac2d82f038605812c79b9f78c1547dd",
"support"
],
"css/position_fixed_simple_a.html": [
"d01b955091107990d014e7f7be9c1181e5b06d66",
"reftest"

17
tests/wpt/mozilla/tests/css/position_fixed_scroll.html Normal file
View 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
View 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>