mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
a267c39c01
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
81 lines
2.0 KiB
Plaintext
81 lines
2.0 KiB
Plaintext
<sky>
|
|
|
|
<import src="../resources/run-after-display.sky" />
|
|
<style>
|
|
sky {
|
|
padding: 10px;
|
|
}
|
|
div {
|
|
width: 50px;
|
|
height: 50px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
Transforms
|
|
<div style="transform: translate3d(10px, 10px, 0); background-color: pink;">
|
|
One
|
|
<div style="transform: translate3d(10px, 10px, 0); background-color: salmon;">
|
|
Two
|
|
<div style="transform: translate3d(10px, 10px, 0); background-color: papayawhip;">
|
|
Three
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; top: 250px;">
|
|
Opacity
|
|
<div style="opacity: 0.8; background-color: pink; transform: translate3d(0, 0, 0)">
|
|
One
|
|
<div style="opacity: 0.7; position: absolute; left: 15px; top: 10px; background-color: salmon;">
|
|
Two
|
|
<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
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div style="position: absolute; right: 50px;">
|
|
<div style="background-color: red;">
|
|
1
|
|
</div>
|
|
<div style="position: absolute; left: 40px; top: 40px; z-index: 2; background-color: pink;">
|
|
4
|
|
</div>
|
|
<div style="position: absolute; left: 20px; top: 20px; z-index: 0; background-color: salmon;">
|
|
2
|
|
</div>
|
|
<div style="position: absolute; left: 35px; top: 20px; z-index: 1; background-color: papayawhip;">
|
|
3
|
|
</div>
|
|
<div style="background-color: green;">
|
|
1
|
|
</div>
|
|
z-index
|
|
</div>
|
|
|
|
<div style="position: absolute; bottom: 50px;">
|
|
Clip-path
|
|
<div style="background-color: pink; -webkit-clip-path: circle(25px at 25px 25px);">
|
|
<div style="background-color: salmon; -webkit-clip-path: circle(25px at 35px 35px);">
|
|
<div style="background-color: papayawhip; -webkit-clip-path: circle(25px at 45px 45px);"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import "dart:sky.internals" as internals;
|
|
|
|
void main() {
|
|
runAfterDisplay(() {
|
|
internals.notifyTestComplete("");
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</sky>
|