background.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.calculateBackgroundRepeatPath = exports.getBackgroundValueForIndex = exports.calculateBackgroundSize = exports.isAuto = exports.calculateBackgroundRendering = exports.calculateBackgroundPaintingArea = exports.calculateBackgroundPositioningArea = void 0;
  4. var background_size_1 = require("../css/property-descriptors/background-size");
  5. var vector_1 = require("./vector");
  6. var length_percentage_1 = require("../css/types/length-percentage");
  7. var parser_1 = require("../css/syntax/parser");
  8. var box_sizing_1 = require("./box-sizing");
  9. var calculateBackgroundPositioningArea = function (backgroundOrigin, element) {
  10. if (backgroundOrigin === 0 /* BORDER_BOX */) {
  11. return element.bounds;
  12. }
  13. if (backgroundOrigin === 2 /* CONTENT_BOX */) {
  14. return box_sizing_1.contentBox(element);
  15. }
  16. return box_sizing_1.paddingBox(element);
  17. };
  18. exports.calculateBackgroundPositioningArea = calculateBackgroundPositioningArea;
  19. var calculateBackgroundPaintingArea = function (backgroundClip, element) {
  20. if (backgroundClip === 0 /* BORDER_BOX */) {
  21. return element.bounds;
  22. }
  23. if (backgroundClip === 2 /* CONTENT_BOX */) {
  24. return box_sizing_1.contentBox(element);
  25. }
  26. return box_sizing_1.paddingBox(element);
  27. };
  28. exports.calculateBackgroundPaintingArea = calculateBackgroundPaintingArea;
  29. var calculateBackgroundRendering = function (container, index, intrinsicSize) {
  30. var backgroundPositioningArea = exports.calculateBackgroundPositioningArea(exports.getBackgroundValueForIndex(container.styles.backgroundOrigin, index), container);
  31. var backgroundPaintingArea = exports.calculateBackgroundPaintingArea(exports.getBackgroundValueForIndex(container.styles.backgroundClip, index), container);
  32. var backgroundImageSize = exports.calculateBackgroundSize(exports.getBackgroundValueForIndex(container.styles.backgroundSize, index), intrinsicSize, backgroundPositioningArea);
  33. var sizeWidth = backgroundImageSize[0], sizeHeight = backgroundImageSize[1];
  34. var position = length_percentage_1.getAbsoluteValueForTuple(exports.getBackgroundValueForIndex(container.styles.backgroundPosition, index), backgroundPositioningArea.width - sizeWidth, backgroundPositioningArea.height - sizeHeight);
  35. var path = exports.calculateBackgroundRepeatPath(exports.getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea);
  36. var offsetX = Math.round(backgroundPositioningArea.left + position[0]);
  37. var offsetY = Math.round(backgroundPositioningArea.top + position[1]);
  38. return [path, offsetX, offsetY, sizeWidth, sizeHeight];
  39. };
  40. exports.calculateBackgroundRendering = calculateBackgroundRendering;
  41. var isAuto = function (token) { return parser_1.isIdentToken(token) && token.value === background_size_1.BACKGROUND_SIZE.AUTO; };
  42. exports.isAuto = isAuto;
  43. var hasIntrinsicValue = function (value) { return typeof value === 'number'; };
  44. var calculateBackgroundSize = function (size, _a, bounds) {
  45. var intrinsicWidth = _a[0], intrinsicHeight = _a[1], intrinsicProportion = _a[2];
  46. var first = size[0], second = size[1];
  47. if (!first) {
  48. return [0, 0];
  49. }
  50. if (length_percentage_1.isLengthPercentage(first) && second && length_percentage_1.isLengthPercentage(second)) {
  51. return [length_percentage_1.getAbsoluteValue(first, bounds.width), length_percentage_1.getAbsoluteValue(second, bounds.height)];
  52. }
  53. var hasIntrinsicProportion = hasIntrinsicValue(intrinsicProportion);
  54. if (parser_1.isIdentToken(first) && (first.value === background_size_1.BACKGROUND_SIZE.CONTAIN || first.value === background_size_1.BACKGROUND_SIZE.COVER)) {
  55. if (hasIntrinsicValue(intrinsicProportion)) {
  56. var targetRatio = bounds.width / bounds.height;
  57. return targetRatio < intrinsicProportion !== (first.value === background_size_1.BACKGROUND_SIZE.COVER)
  58. ? [bounds.width, bounds.width / intrinsicProportion]
  59. : [bounds.height * intrinsicProportion, bounds.height];
  60. }
  61. return [bounds.width, bounds.height];
  62. }
  63. var hasIntrinsicWidth = hasIntrinsicValue(intrinsicWidth);
  64. var hasIntrinsicHeight = hasIntrinsicValue(intrinsicHeight);
  65. var hasIntrinsicDimensions = hasIntrinsicWidth || hasIntrinsicHeight;
  66. // If the background-size is auto or auto auto:
  67. if (exports.isAuto(first) && (!second || exports.isAuto(second))) {
  68. // If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
  69. if (hasIntrinsicWidth && hasIntrinsicHeight) {
  70. return [intrinsicWidth, intrinsicHeight];
  71. }
  72. // If the image has no intrinsic dimensions and has no intrinsic proportions,
  73. // it's rendered at the size of the background positioning area.
  74. if (!hasIntrinsicProportion && !hasIntrinsicDimensions) {
  75. return [bounds.width, bounds.height];
  76. }
  77. // TODO If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
  78. // If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension.
  79. // The other dimension is computed using the specified dimension and the intrinsic proportions.
  80. if (hasIntrinsicDimensions && hasIntrinsicProportion) {
  81. var width_1 = hasIntrinsicWidth
  82. ? intrinsicWidth
  83. : intrinsicHeight * intrinsicProportion;
  84. var height_1 = hasIntrinsicHeight
  85. ? intrinsicHeight
  86. : intrinsicWidth / intrinsicProportion;
  87. return [width_1, height_1];
  88. }
  89. // If the image has only one intrinsic dimension but has no intrinsic proportions,
  90. // it's rendered using the specified dimension and the other dimension of the background positioning area.
  91. var width_2 = hasIntrinsicWidth ? intrinsicWidth : bounds.width;
  92. var height_2 = hasIntrinsicHeight ? intrinsicHeight : bounds.height;
  93. return [width_2, height_2];
  94. }
  95. // If the image has intrinsic proportions, it's stretched to the specified dimension.
  96. // The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
  97. if (hasIntrinsicProportion) {
  98. var width_3 = 0;
  99. var height_3 = 0;
  100. if (length_percentage_1.isLengthPercentage(first)) {
  101. width_3 = length_percentage_1.getAbsoluteValue(first, bounds.width);
  102. }
  103. else if (length_percentage_1.isLengthPercentage(second)) {
  104. height_3 = length_percentage_1.getAbsoluteValue(second, bounds.height);
  105. }
  106. if (exports.isAuto(first)) {
  107. width_3 = height_3 * intrinsicProportion;
  108. }
  109. else if (!second || exports.isAuto(second)) {
  110. height_3 = width_3 / intrinsicProportion;
  111. }
  112. return [width_3, height_3];
  113. }
  114. // If the image has no intrinsic proportions, it's stretched to the specified dimension.
  115. // The unspecified dimension is computed using the image's corresponding intrinsic dimension,
  116. // if there is one. If there is no such intrinsic dimension,
  117. // it becomes the corresponding dimension of the background positioning area.
  118. var width = null;
  119. var height = null;
  120. if (length_percentage_1.isLengthPercentage(first)) {
  121. width = length_percentage_1.getAbsoluteValue(first, bounds.width);
  122. }
  123. else if (second && length_percentage_1.isLengthPercentage(second)) {
  124. height = length_percentage_1.getAbsoluteValue(second, bounds.height);
  125. }
  126. if (width !== null && (!second || exports.isAuto(second))) {
  127. height =
  128. hasIntrinsicWidth && hasIntrinsicHeight
  129. ? (width / intrinsicWidth) * intrinsicHeight
  130. : bounds.height;
  131. }
  132. if (height !== null && exports.isAuto(first)) {
  133. width =
  134. hasIntrinsicWidth && hasIntrinsicHeight
  135. ? (height / intrinsicHeight) * intrinsicWidth
  136. : bounds.width;
  137. }
  138. if (width !== null && height !== null) {
  139. return [width, height];
  140. }
  141. throw new Error("Unable to calculate background-size for element");
  142. };
  143. exports.calculateBackgroundSize = calculateBackgroundSize;
  144. var getBackgroundValueForIndex = function (values, index) {
  145. var value = values[index];
  146. if (typeof value === 'undefined') {
  147. return values[0];
  148. }
  149. return value;
  150. };
  151. exports.getBackgroundValueForIndex = getBackgroundValueForIndex;
  152. var calculateBackgroundRepeatPath = function (repeat, _a, _b, backgroundPositioningArea, backgroundPaintingArea) {
  153. var x = _a[0], y = _a[1];
  154. var width = _b[0], height = _b[1];
  155. switch (repeat) {
  156. case 2 /* REPEAT_X */:
  157. return [
  158. new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)),
  159. new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)),
  160. new vector_1.Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)),
  161. new vector_1.Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y))
  162. ];
  163. case 3 /* REPEAT_Y */:
  164. return [
  165. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)),
  166. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)),
  167. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)),
  168. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top))
  169. ];
  170. case 1 /* NO_REPEAT */:
  171. return [
  172. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)),
  173. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)),
  174. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y + height)),
  175. new vector_1.Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y + height))
  176. ];
  177. default:
  178. return [
  179. new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.top)),
  180. new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.top)),
  181. new vector_1.Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)),
  182. new vector_1.Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top))
  183. ];
  184. }
  185. };
  186. exports.calculateBackgroundRepeatPath = calculateBackgroundRepeatPath;
  187. //# sourceMappingURL=background.js.map