LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects-expected.html - Issue 667693002: Convert fast/multicol/client-rects.html to reftest.

Side by Side Diff: LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects-expected.html

Issue 667693002: Convert fast/multicol/client-rects.html to reftest. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Drop -webkit from box-sizing. Created 6 years, 2 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 unified diff | Download patch

« no previous file with comments | « LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.html ('k') | LayoutTests/platform/linux/fast/multicol/client-rects-expected.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <style>

2 div.columns {

3 display: inline-block;

4 height: 50px;

5 width: 110px;

6 margin: 10px 0;

7 padding: 10px;

8 border: solid black;

9 font-family: Ahem;

10 font-size: 25px;

11 color: lightblue;

12 -webkit-columns: 2;

13 -webkit-column-gap: 10px;

14 columns: 2;

15 column-gap: 10px;

16 column-fill: auto;

17 }

18

19 div.marker {

20 position: absolute;

21 border: solid rgba(0, 0, 255, 0.5);

22 -webkit-box-sizing: border-box;

23 }

24

25 input[type="range"] {

26 -webkit-appearance: none;

27 width: 25px;

28 height: 25px;

29 background-color: lightblue;

30 }

31

32 input[type="range"]::-webkit-slider-thumb {

33 -webkit-appearance: none;

34 }

35 </style>

36 <p>

37 The blue borders should coincide with light blue squares, like this:

38 <span style="display: inline-block; background-color: lightblue; border: sol id rgba(0, 0, 255, 0.5); width: 19px; height: 19px;"></span>.

39 There should be none of this:

40 <span style="display: inline-block; background-color: lightblue; width: 25px ; height: 25px;"></span>

41 or this:

42 <span style="display: inline-block; border: solid rgba(0, 0, 255, 0.5); widt h: 19px; height: 19px;"></span>.

43 </p>

44 <div class="columns" id="t1">

45 <br>x y z

46 </div>

47

48 <div class="columns">

49 <br><span id="t2">x y z</span>

50 </div>

51

52 <div class="columns">

53 <br><div id="t3">x y z</div>

54 </div>

55

56 <div class="columns">

57 <br><div id="t4"><br>y z</div>

58 </div>

59

60 <div class="columns">

61 <br><div><br><input id="t5" type="range"></div>

62 </div>

63

64 <div class="columns">

65 <br><div><br><img id="t6" style="width: 25px; height: 25px; background-color : lightblue;"></div>

66 </div>

67

68 <p>

69 Except here, where the blue border should be around the bigger slice of the blue square, on the right.

70 </p>

71

72 <div class="columns">

73 <div id="t7" style=" margin-top: 40px; width: 25px; height: 25px; background -color: lightblue;"></div>

74 </div>

75

76 <script>

77 function placeMarker(clientRect)

78 {

79 var marker = document.body.appendChild(document.createElement("div"));

80 marker.className = "marker";

81 marker.style.left = clientRect.left + "px";

82 marker.style.top = clientRect.top + "px";

83 marker.style.width = clientRect.width + "px";

84 marker.style.height = clientRect.height + "px";

85 }

86

87 function placeMarkersForRange(range, startOffset)

88 {

89 if (startOffset === undefined)

90 startOffset = 0;

91

92 var clientRects = range.getClientRects();

93 for (var i = startOffset; i < clientRects.length; ++i)

94 placeMarker(clientRects[i]);

95 }

96

97 var range = document.createRange();

98

99 var textNode = document.getElementById("t1").firstChild.nextSibling.nextSibl ing;

100 range.setStart(textNode, 0);

101 range.setEnd(textNode, 5);

102 placeMarkersForRange(range);

103

104 textNode = document.getElementById("t2").firstChild;

105 range.setStart(textNode, 0);

106 range.setEnd(textNode, 5);

107 placeMarkersForRange(range);

108

109 textNode = document.getElementById("t3").firstChild;

110 range.setStart(textNode, 0);

111 range.setEnd(textNode, 5);

112 placeMarkersForRange(range);

113

114 var block = document.getElementById("t4");

115 range.selectNode(block);

116 placeMarkersForRange(range, 1);

117

118 var slider = document.getElementById("t5");

119 range.selectNode(slider);

120 placeMarkersForRange(range);

121

122 var image = document.getElementById("t6");

123 range.selectNode(image);

124 placeMarkersForRange(range);

125

126 var div = document.getElementById("t7");

127 range.selectNode(div);

128 placeMarkersForRange(div);

129 </script>

OLD	NEW