LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects.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.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/client-rects-expected.html ('k') | LayoutTests/fast/multicol/newmulticol/compare-with-old-impl/client-rects-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <script>

2 if (window.internals)

3 internals.settings.setRegionBasedColumnsEnabled(true);

4 </script>

5 <style>

6 div.columns {

7 display: inline-block;

8 height: 50px;

9 width: 110px;

10 margin: 10px 0;

11 padding: 10px;

12 border: solid black;

13 font-family: Ahem;

14 font-size: 25px;

15 color: lightblue;

16 -webkit-columns: 2;

17 -webkit-column-gap: 10px;

18 columns: 2;

19 column-gap: 10px;

20 column-fill: auto;

21 }

22

23 div.marker {

24 position: absolute;

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

26 -webkit-box-sizing: border-box;

27 }

28

29 input[type="range"] {

30 -webkit-appearance: none;

31 width: 25px;

32 height: 25px;

33 background-color: lightblue;

34 }

35

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

37 -webkit-appearance: none;

38 }

39 </style>

40 <p>

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

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

43 There should be none of this:

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

45 or this:

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

47 </p>

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

49 <br>x y z

50 </div>

51

52 <div class="columns">

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

54 </div>

55

56 <div class="columns">

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

58 </div>

59

60 <div class="columns">

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

62 </div>

63

64 <div class="columns">

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

66 </div>

67

68 <div class="columns">

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

70 </div>

71

72 <p>

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

74 </p>

75

76 <div class="columns">

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

78 </div>

79

80 <script>

81 function placeMarker(clientRect)

82 {

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

84 marker.className = "marker";

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

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

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

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

89 }

90

91 function placeMarkersForRange(range, startOffset)

92 {

93 if (startOffset === undefined)

94 startOffset = 0;

95

96 var clientRects = range.getClientRects();

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

98 placeMarker(clientRects[i]);

99 }

100

101 var range = document.createRange();

102

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

104 range.setStart(textNode, 0);

105 range.setEnd(textNode, 5);

106 placeMarkersForRange(range);

107

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

109 range.setStart(textNode, 0);

110 range.setEnd(textNode, 5);

111 placeMarkersForRange(range);

112

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

114 range.setStart(textNode, 0);

115 range.setEnd(textNode, 5);

116 placeMarkersForRange(range);

117

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

119 range.selectNode(block);

120 placeMarkersForRange(range, 1);

121

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

123 range.selectNode(slider);

124 placeMarkersForRange(range);

125

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

127 range.selectNode(image);

128 placeMarkersForRange(range);

129

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

131 range.selectNode(div);

132 placeMarkersForRange(div);

133 </script>

OLD	NEW