Skip to content

GitLab

T
tangled
Commit d22bf56b authored by Daniel Libby's avatar Daniel Libby Committed by Commit Bot
Browse files
Options

Convert NGOutOfFlowLayoutPartTest unit tests to web_tests 

This gets more coverage on the paint portions and ensures these cases
get coverage in WPT. There was one converted test that looks like it
is not working correctly under LayoutNG block fragmentation so filed a
bug to fix that in follow up.

There are a couple of others (break-before and -after for children of
abs-pos elements, and some spanner tests) that don't match Chromium nor
Firefox currently - these need a bit more investigation.

Change-Id: I6d3bcb0c1de2835f990b95d04ad32175150609dc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2525844
Commit-Queue: Daniel Libby <dlibby@microsoft.com>
Reviewed-by: default avatarAlison Maher <almaher@microsoft.com>
Reviewed-by: default avatarBenjamin Beaudry <benjamin.beaudry@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#826202}
parent 0fed1964
Show whitespace changes
Inline Side-by-side
Showing with 362 additions and 2 deletions
third_party/blink/web_tests/TestExpectations
View file @ d22bf56b
......@@ -1042,6 +1042,7 @@ virtual/layout_ng_block_frag/fast/multicol/vertical-rl/float-edge.html [ Pass ]
crbug.com/1079031 virtual/layout_ng_block_frag/external/wpt/css/css-break/block-end-aligned-abspos-nested.html [ Failure ]
crbug.com/1079031 virtual/layout_ng_block_frag/external/wpt/css/css-break/block-end-aligned-abspos-with-overflow.html [ Failure ]
crbug.com/1113911 virtual/layout_ng_block_frag/external/wpt/css/css-break/fieldset-001.html [ Failure ]
crbug.com/1146973 virtual/layout_ng_block_frag/external/wpt/css/css-break/out-of-flow-in-multicolumn-009.html [ Failure ]
crbug.com/1066380 virtual/layout_ng_block_frag/external/wpt/css/css-break/widows-orphans-002.html [ Failure ]
crbug.com/1066380 virtual/layout_ng_block_frag/external/wpt/css/css-break/widows-orphans-004.html [ Failure ]
crbug.com/1079031 virtual/layout_ng_block_frag/external/wpt/css/css-multicol/change-out-of-flow-type-and-remove-inner-multicol-crash.html [ Crash Failure ]
......
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-001.html
View file @ d22bf56b
<!DOCTYPE html>
<link rel="author" title="Benjamin Beaudry" href="mailto:bebeaudr@microsoft.com">
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#break-decoration">
<link rel="match" href="out-of-flow-in-multicolum-001-ref.html">
<link rel="match" href="out-of-flow-in-multicolumn-001-ref.html">
<p>The abs element should be split equally into the two columns - no red!</p>
<style>
......
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-003.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#break-decoration">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Tests that empty column fragments are added if an OOF element begins layout
in a fragmentainer that is more than one index beyond the last existing
column fragmentainer. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
/* Move the multicolumn left to account for the first three empty columns */
position: relative;
left: -150px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
top: 300px;
width: 50px;
height: 200px;
background: green;
}
</style>
<div id="multicol">
<div class="rel">
<div class="abs"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-004-ref.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<!-- Simulate two multi-column containers with an out-of-flow positioned child that
fragments, even in the presence of break-inside: avoid and break-before: column. -->
<style>
.initial {
float: left;
height: 20px;
width: 20px;
background: blue;
}
.first-fragment {
width: 40px;
height: 20px;
background: green;
margin-top: 10px;
}
.second-fragment {
width: 40px;
height: 10px;
background: green;
margin-left: 50px;
}
</style>
<div class="initial"></div>
<div class="second-fragment"></div>
<div class="first-fragment"></div>
<div class="initial"></div>
<div class="second-fragment"></div>
<div class="first-fragment"></div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-004.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#breaking-controls">
<link rel="match" href="out-of-flow-in-multicolumn-004-ref.html">
<!-- break-inside: avoid and break-before: column do not apply to absolute positioned elements. -->
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 40px;
width: 100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 40px;
height: 30px;
background: green;
}
.content {
width: 20px;
height: 20px;
background: blue;
}
.inside {
break-inside: avoid;
}
.before {
break-before: column;
}
</style>
<div id="multicol">
<div class="content"></div>
<div class="rel">
<div class="abs inside"></div>
</div>
</div>
<div id="multicol">
<div class="content"></div>
<div class="rel">
<div class="abs before"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-005.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-break-3/#breaking-controls">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- break-after: column does not apply to absolute positioned elements. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 10px;
height: 100px;
width: 200px;
}
.rel {
position: relative;
height: 10px;
width: 100px;
background: green;
}
.abs {
position: absolute;
width: 40px;
height: 30px;
break-after: column;
}
.content {
width: 100px;
height: 45px;
background: green;
}
</style>
<div id="multicol">
<div class="content"></div>
<div class="rel">
<div class="abs"></div>
</div>
<div class="content"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-006.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Tests that the fragments of a positioned element are added to the right fragmentainer despite the presence of column spanners. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 140px;
width: 100px;
margin-top: -40px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: green;
}
.spanner {
column-span: all;
height: 5px;
}
</style>
<div id="multicol">
<div class="rel">
<div class="spanner"></div>
<div style="height: 60px; "></div>
<div class="spanner"></div>
<div class="abs"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-007.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Tests that a positioned element without a top or bottom property uses the static position -
even though it's treated as an OOF element. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
/* Move the multicolumn left to account for the first empty column */
position: relative;
left: -50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: green;
}
</style>
<div id="multicol">
<div class="rel">
<div style="height: 100px; width: 50px;"></div>
<div class="abs"></div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-008.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Tests fragmented abspos elements with a spanner nested inside. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
width: 50px;
height: 200px;
background: green;
}
.spanner {
column-span: all;
height: 10px;
}
</style>
<div id="multicol">
<div class="rel">
<div class="abs">
<div class="spanner"></div>
</div>
</div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-009.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Tests that empty column fragments are added if an OOF element begins layout in a fragmentainer that is more than one index beyond the last existing column fragmentainer in the presence of a spanner. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 2;
column-fill: auto;
column-gap: 0px;
height: 100px;
width: 100px;
margin-left: -100px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
top: 200px;
width: 50px;
height: 200px;
background: green;
}
</style>
<div id="multicol">
<div class="rel">
<div class="abs"></div>
</div>
<div style="column-span: all;"></div>
<div style="column-span: all;"></div>
<div style="column-span: all;"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-010.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Fragmented OOF element with block-size percentage resolution. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
column-count: 3;
column-fill: auto;
column-gap: 0px;
/* last child is a spanner that takes up 33.33% so available height for
.rel and .abs is 100px */
height: 150px;
width: 150px;
margin-left: -50px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
/* offset one full 100px column (accounted for by negative margin on #multicol */
top: 100px;
width: 50px;
height: 66.667%;
background: green;
}
.spanner {
column-span: all;
height: 33.33%;
}
</style>
<div id="multicol">
<div class="rel">
<div class="abs"></div>
<div style="width: 10px; height: 300px;"></div>
</div>
<div class="spanner"></div>
</div>
third_party/blink/web_tests/external/wpt/css/css-break/out-of-flow-in-multicolumn-011.html 0 → 100644
View file @ d22bf56b
<!DOCTYPE html>
<link rel="help" href="href=https://www.w3.org/TR/css-position-3/#abspos-breaking">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
<!-- Fragmented OOF element with block-size percentage resolution and overflow. -->
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<style>
#multicol {
/* Set things up so that the absolutely positioned element takes up two
columns of 50px each. Start in the second column so offset by negative
50px margin. */
columns: 5;
width: 250px;
height: 100px;
margin-left: -50px;
column-fill: auto;
column-gap: 0px;
}
.rel {
position: relative;
}
.abs {
position: absolute;
top: 0px;
width: 50px;
height: 100%;
background: green;
}
</style>
<div id="multicol">
<div style="height: 100px;"></div>
<div class="rel">
<div class="abs"></div>
<div style="width: 44px; height: 200px;">
<div style="width: 33px; height: 400px;"></div>
</div>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment