third_party/WebKit/LayoutTests/external/csswg-test/css-display-3/display-contents-computed-style.html - Issue 2707203005: Import csswg-test@ed79f8614481e97d61f17f41b65448c211d27c6f

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/css-display-3/display-contents-computed-style.html

Issue 2707203005: Import csswg-test@ed79f8614481e97d61f17f41b65448c211d27c6f (Closed)

Patch Set: Created 3 years, 9 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:

« no previous file with comments | « third_party/WebKit/LayoutTests/external/csswg-test/css-display-3/display-contents-alignment-002-expected.html ('k') | third_party/WebKit/LayoutTests/external/csswg-test/css-grid-1/grid-items/support/100x100-green.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <meta charset="utf-8">	2 <meta charset="utf-8">

3 <title>CSS Display: Computed style for display:contents</title>	3 <title>CSS Display: Computed style for display:contents</title>

4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">	4 <link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">

5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-co ntents">	5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-co ntents">

6 <link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">	6 <link rel="help" href="https://drafts.csswg.org/css-display-3/#transformations">

7 <link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">	7 <link rel="help" href="https://drafts.csswg.org/cssom-1/#resolved-values">

8 <script src="/resources/testharness.js"></script>	8 <script src="/resources/testharness.js"></script>

9 <script src="/resources/testharnessreport.js"></script>	9 <script src="/resources/testharnessreport.js"></script>

10 <style>	10 <style>

11 html, .contents { display: contents }	11 html, .contents { display: contents }

12	12

13 #t2 .contents { background-color: green }	13 #t2 .contents { background-color: green }

14 #t2 span { background-color: inherit }	14 #t2 span { background-color: inherit }

15	15

16 #t3 .contents { color: green }	16 #t3 .contents { color: green }

17	17

18 #t4 { display: flex; align-items: center }	18 #t4 {

19 #t4 .contents { align-items: baseline }

20 #t4 span { align-self: auto }

21

22 #t5 {

23 width: auto;	19 width: auto;

24 height: 50%;	20 height: 50%;

25 margin-left: 25%;	21 margin-left: 25%;

26 padding-top: 10%;	22 padding-top: 10%;

27 }	23 }

28 </style>	24 </style>

29 <div id="t1" class="contents"></div>	25 <div id="t1" class="contents"></div>

30 <div id="t2">	26 <div id="t2">

31 <div class="contents">	27 <div class="contents">

32 <span></span>	28 <span></span>

33 </div>	29 </div>

34 </div>	30 </div>

35 <div id="t3">	31 <div id="t3">

36 <div class="contents">	32 <div class="contents">

37 <span></span>	33 <span></span>

38 </div>	34 </div>

39 </div>	35 </div>

40 <div id="t4">	36 <div id="t4">

41 <div class="contents">	37 <div class="contents">

42 <span></span>	38 <span></span>

43 </div>	39 </div>

44 </div>	40 </div>

45 <div id="t5" class="contents"></div>	41 <div id="t4" class="contents"></div>

46 <script>	42 <script>

47 test(function(){	43 test(function(){

48 assert_equals(getComputedStyle(document.querySelector("#t1")).display, " contents");	44 assert_equals(getComputedStyle(document.querySelector("#t1")).display, " contents");

49 }, "Serialization of computed style value for display:contents");	45 }, "Serialization of computed style value for display:contents");

50	46

51 test(function(){	47 test(function(){

52 assert_equals(getComputedStyle(document.querySelector("#t2 span")).backg roundColor, "rgb(0, 128, 0)");	48 assert_equals(getComputedStyle(document.querySelector("#t2 span")).backg roundColor, "rgb(0, 128, 0)");

53 }, "display:contents element as inherit parent - explicit inheritance");	49 }, "display:contents element as inherit parent - explicit inheritance");

54	50

55 test(function(){	51 test(function(){

56 assert_equals(getComputedStyle(document.querySelector("#t3 span")).color , "rgb(0, 128, 0)");	52 assert_equals(getComputedStyle(document.querySelector("#t3 span")).color , "rgb(0, 128, 0)");

57 }, "display:contents element as inherit parent - implicit inheritance");	53 }, "display:contents element as inherit parent - implicit inheritance");

58	54

59 test(function(){	55 test(function(){

60 assert_equals(getComputedStyle(document.querySelector("#t4 span")).align Self, "baseline");	56 var computed = getComputedStyle(document.querySelector("#t4"));

61 }, "align-self:auto resolution for flex item inside display:contents");

62

63 test(function(){

64 var computed = getComputedStyle(document.querySelector("#t5"));

65 assert_equals(computed.width, "auto");	57 assert_equals(computed.width, "auto");

66 assert_equals(computed.height, "50%");	58 assert_equals(computed.height, "50%");

67 assert_equals(computed.marginLeft, "25%");	59 assert_equals(computed.marginLeft, "25%");

68 assert_equals(computed.paddingTop, "10%");	60 assert_equals(computed.paddingTop, "10%");

69 }, "Resolved value should be computed value, not used value, for display:con tents");	61 }, "Resolved value should be computed value, not used value, for display:con tents");

70	62

71 test(function(){	63 test(function(){

72 assert_equals(getComputedStyle(document.documentElement).display, "block ");	64 assert_equals(getComputedStyle(document.documentElement).display, "block ");

73 }, "display:contents is blockified for root elements");	65 }, "display:contents is blockified for root elements");

74 </script>	66 </script>

OLD	NEW