third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html - Issue 2104493003: Import csswg-test@0589ea025a684e31742740ca3b599230bcc25e5d

Unified Diff: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html

Issue 2104493003: Import csswg-test@0589ea025a684e31742740ca3b599230bcc25e5d (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Update TestExpectations, delete background Created 4 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-001-expected.xhtml ('k') | third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002-expected.html » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html

diff --git a/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html b/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html

index e25555874f55c10a30e58e150127cb2dad37e375..4b21404a9bd71ce25aafbe1f972b6716f91bad8f 100644

--- a/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html

+++ b/third_party/WebKit/LayoutTests/imported/csswg-test/vendor-imports/mozilla/mozilla-central-reftests/flexbox/flexbox-items-as-stacking-contexts-002.html

@@ -1,9 +1,9 @@

<!DOCTYPE html>

-<!--

+<!--

Any copyright is dedicated to the Public Domain.

http://creativecommons.org/publicdomain/zero/1.0/

- -->

-<!-- This testcase checks flex items are painted atomically. In particular,

+-->

+<!-- This testcase checks flex items are painted atomically. In particular,

if one item has content that overflows into the region of another item,

then one item is painted "behind" the other; there shouldn't normally

any interleaving of backgrounds and content between the two items.

@@ -11,9 +11,9 @@

This testcase also tests some special cases that will change the paint

ordering - specifically, the properties "position", "z-index", and

"order" on flex items.

- -->

-<!-- This was resolved by the CSSWG in April 2013:

- http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->

+ -->

+<!-- This was resolved by the CSSWG in April 2013:

+ http://krijnhoetmer.nl/irc-logs/css/20130403#l-455 -->

<html>

<head>

<title>CSS Test: Testing that flex items paint as pseudo-stacking contexts (like inline-blocks): atomically, in the absence of 'z-index' on descendants</title>

@@ -43,36 +43,48 @@

</style>

</head>

<body>

- <!-- This container has two flex items, the first of which has content

+ <!-- This container has two flex items, the first of which has content

sticking out & overlapping the second. If they're painting atomically

(and in the right order), the second item's background should cover the

- first item's overflowing content. -->

+ first item's overflowing content. -->

<div class="flexContainer"

- ><div class="item1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div>

+ ><div class="item1">ThisIsALongUnbrokenString</div

+ ><div class="item2">HereIsSomeMoreLongText</div

+ ></div>

- <!-- Now, the first item is relatively positioned, which should make it paint

- on top of everything. -->

+ <!-- Now, the first item is relatively positioned, which should make it paint

+ on top of everything. -->

<div class="flexContainer"

- ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div>

+ ><div class="item1" style="position:relative">ThisIsALongUnbrokenString</div

+ ><div class="item2">HereIsSomeMoreLongText</div

+ ></div>

- <!-- Now, the first item is has "z-index" set, which should make it paint on

- top of everything. -->

+ <!-- Now, the first item is has "z-index" set, which should make it paint on

+ top of everything. -->

<div class="flexContainer"

- ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div>

+ ><div class="item1" style="z-index: 1">ThisIsALongUnbrokenString</div

+ ><div class="item2">HereIsSomeMoreLongText</div

+ ></div>

- <!-- Now, the first item has "order" set to a higher value than default,

- which should make it paint on top (and at the far right) -->

+ <!-- Now, the first item has "order" set to a higher value than default,

+ which should make it paint on top (and at the far right) -->

<div class="flexContainer"

- ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div>

+ ><div class="item1" style="order: 1">ThisIsALongUnbrokenString</div

+ ><div class="item2">HereIsSomeMoreLongText</div

+ ></div>

- <!-- And for thoroughness, let's set "order" to a lower value than default,

- on the second item. (Should render the same as previous example.) -->

+ <!-- And for thoroughness, let's set "order" to a lower value than default,

+ on the second item. (Should render the same as previous example.) -->

<div class="flexContainer"

- ><div class="item1">ThisIsALongUnbrokenString</div><div class="item2" style="order: -1">HereIsSomeMoreLongText</div></div>

+ ><div class="item1">ThisIsALongUnbrokenString</div

+ ><div class="item2" style="order: -1">HereIsSomeMoreLongText</div

+ ></div>

- <!-- ...but if we relatively position that second item, it should paint

- on top again, despite its low "order" value. -->

+ <!-- ...but if we relatively position that second item, it should paint

+ on top again, despite its low "order" value. -->

<div class="flexContainer"

- ><div class="item1">ThisIsALongUnbrokenString</div><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div></div>

+ ><div class="item1">ThisIsALongUnbrokenString</div

+ ><div class="item2" style="order: -1; position: relative">HereIsSomeMoreLongText</div

+ ></div>

</body>

</html>