DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove the concept of staticly positioned absolutes.

Browse Source 
On the web, if you set position:absolute, but not
top/right/bottom/left, then the absolute goes where it
would have gone if it wasn't positioned. The use-cases for
this are slim and it introduces a lot of complexity to the
engine.

Also changes behavior in the presence of direction:rtl.
On the web, direction:rtl and top/left:auto would
sometimes set right:0. Instead we always position at
0,0 if the opposing values are auto.

This removes the code for this positioning and allows
simplifying a bunch of dirty bit handling code since
we don't need to setNeedsLayout if lines move around
or wrap differently.

The test cases did change their output, but the new
positioning all looks correct to me.

Review URL: https://codereview.chromium.org/944073006
This commit is contained in:
Ojan Vafai 2015-02-20 20:26:59 -08:00
parent 85887b2bc3
commit e86f8777ae
4 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
engine/src/flutter/tests/layout/position-absolute-expected.txt
View File

@ -4,18 +4,18 @@ layer at (0,0) size 100x100
RenderBlock {block} at (0,0) size 100x100 [bgcolor=#FFC0CB]
RenderBlock {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
RenderBlock {spacer} at (0,40) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
layer at (0,40) size 20x20
RenderBlock (positioned) {absolute} at (0,40) size 20x20 [bgcolor=#008000]
layer at (0,0) size 20x20
RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]
layer at (0,150) size 100x100
RenderParagraph {paragraph} at (0,150) size 100x100 [bgcolor=#FFA500]
RenderBlock (inline-block) {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
RenderBlock (inline-block) {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
layer at (0,194) size 20x20
RenderBlock (positioned) {absolute} at (0,44) size 20x20 [bgcolor=#008000]
layer at (0,150) size 20x20
RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]
layer at (0,300) size 100x100
RenderFlexibleBox {flex} at (0,300) size 100x100 [bgcolor=#FA8072]
RenderBlock {spacer} at (0,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
RenderBlock {spacer} at (40,0) size 40x40 [bgcolor=#FFEFD5] [border: (5px solid #800080)]
layer at (40,300) size 20x20
RenderBlock (positioned) {absolute} at (40,0) size 20x20 [bgcolor=#008000]
layer at (0,300) size 20x20
RenderBlock (positioned) {absolute} at (0,0) size 20x20 [bgcolor=#008000]

2
engine/src/flutter/tests/layout/position-absolute-pixels-expected.sky
View File

@ -1,7 +1,7 @@
<sky>
<import src="../resources/run-after-display.sky"/>
<img src="http://storage.googleapis.com/mojo/sky-pngs/df9f2bee2247645ae83ed672858ee47fb239f70a" />
<img src="http://storage.googleapis.com/mojo/sky-pngs/0e49314437b063e76c28511c34a6c6da72c17956" />
<script>
import "dart:sky";

2
engine/src/flutter/tests/lowlevel/layers-expected.sky
View File

@ -1,7 +1,7 @@
<foo>
<import src="../resources/run-after-display.sky" />
<img src="http://storage.googleapis.com/mojo/sky-pngs/ed3514fd579dbaa8c18594cf99f3b60bf4b6ee75" />
<img src="http://storage.googleapis.com/mojo/sky-pngs/8ce0b808d5248b9e7ed051046def933f6ffaa889" />
<script>
import "dart:sky";

6
engine/src/flutter/tests/lowlevel/layers.sky
View File

@ -24,11 +24,11 @@ Transforms
<div style="position: absolute; top: 250px;">
Opacity
<div style="opacity: 0.8; background-color: pink;">
<div style="opacity: 0.8; background-color: pink; transform: translate3d(0, 0, 0)">
One
<div style="opacity: 0.7; position: absolute; left: 10px; background-color: salmon;">
<div style="opacity: 0.7; position: absolute; left: 15px; top: 10px; background-color: salmon;">
Two
<div style="opacity: 0.6; position: absolute; left: 20px; background-color: papayawhip;">
<div style="opacity: 0.6; position: absolute; left: 15px; top: 10px; background-color: papayawhip;">
Three
<div style="opacity: 0; transform: translate3d(0, 10px, 0); background-color: papayawhip;">
Clear