mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
08610a225f
Automatic update from web-platform-tests [LayoutNG] Consider nodes with only floats/OOFs as block-level. Legacy/WebKit have a "interesting" behaviour for empty-inlines in that they determine the static position of any (inline-level) OOF-positioned nodes as if they were in the block-level context. Other browsers do the following (testcase): https://www.software.hixie.ch/utilities/js/live-dom-viewer/?saved=7055 FF - all inline-level Safari/Legacy - all block-level Edge - block-level for default/block-level NG (prior to this change) - inline-level for default/inline-level. This change makes the "default" e.g. a node with just floats/OOFs as block-level to pick up this static position behaviour. This matches the EdgeHTML behaviour. Bug: 980908 Change-Id: Ifb92bf7e34ada669fa16a1ee5f9e9edaf4546768 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1696345 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Emil A Eklund <eae@chromium.org> Reviewed-by: Emil A Eklund <eae@chromium.org> Cr-Commit-Position: refs/heads/master@{#677105} -- wpt-commits: 7d2e6ae20d62092517732c76fd8588975b95744e wpt-pr: 17808
50 lines
1.1 KiB
HTML
50 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html class='reftest-wait'>
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
|
|
<link rel="help" href="https://www.w3.org/TR/css-position-3/" />
|
|
<meta name="assert" content="This test checks that a dynamic change in constraints calculates the static position correctly."/>
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<style>
|
|
#container {
|
|
position: relative;
|
|
background: red;
|
|
direction: rtl;
|
|
|
|
box-sizing: border-box;
|
|
border: solid green 10px;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
#float {
|
|
float: right;
|
|
background: green;
|
|
|
|
width: 40px;
|
|
height: 80px;
|
|
}
|
|
|
|
#target {
|
|
position: absolute;
|
|
background: green;
|
|
display: inline;
|
|
|
|
width: 40px;
|
|
height: 80px;
|
|
top: -10px;
|
|
left: -10px;
|
|
}
|
|
</style>
|
|
<p>Test passes if there is a filled green square.</p>
|
|
<div id="container">
|
|
<div id="float"></div>
|
|
<div id="target"></div>
|
|
</div>
|
|
<script>
|
|
document.body.offsetTop;
|
|
const target = document.getElementById('target');
|
|
target.style.top = 'initial';
|
|
target.style.left = 'initial';
|
|
document.body.offsetTop;
|
|
takeScreenshot();
|
|
</script>
|