How to use the css-box-model.createBox function in css-box-model

it('should update the frame scroll and the subject', () => {
  const scrollSize: ScrollSize = {
    scrollHeight: 500,
    scrollWidth: 100,
  };
  const customClient: BoxModel = createBox({
    borderBox: {
      // 500 px high
      top: 0,
      left: 0,
      bottom: scrollSize.scrollHeight,
      right: scrollSize.scrollWidth,
    },
  });
  const customPage: BoxModel = customClient;
  const frameClient: BoxModel = createBox({
    borderBox: {
      // only viewing top 100px
      bottom: 100,
      // unchanged
      top: 0,
      right: scrollSize.scrollWidth,
      left: 0,
    },
  });
  const framePage: BoxModel = frameClient;
  const originalFrameScroll: Position = { x: 0, y: 0 };
  const droppable: DroppableDimension = getDroppable({
    descriptor,
    client: customClient,
    page: customPage,
    direction: 'vertical',

export default (preset: Object) => {
  const scrollableScrollSize = {
    scrollWidth: 800,
    scrollHeight: 800,
  };
  const frameClient: BoxModel = createBox({
    borderBox: {
      top: 0,
      left: 0,
      right: 600,
      bottom: 600,
    },
  });

  const scrollable: DroppableDimension = getDroppableDimension({
    // stealing the home descriptor
    descriptor: preset.home.descriptor,
    direction: preset.home.axis.direction,
    borderBox: {
      top: 0,
      left: 0,
      // bigger than the frame

describe('frame clipping', () => {
    const frameClient: BoxModel = createBox({
      // bigger on every side by 10px
      borderBox: expandBySpacing(client.borderBox, ten),
      margin,
      border,
      padding,
    });
    const framePage: BoxModel = withScroll(frameClient, windowScroll);

    type Options = {|
      shouldClipSubject: boolean,
    |};

    const defaultOptions: Options = { shouldClipSubject: true };

    const getWithClient = (
      customClient: BoxModel,

newScrollable.frameClient,
        );

        const isFrameEqual: boolean =
          oldScrollable.frameClient.borderBox.height ===
            newScrollable.frameClient.borderBox.height &&
          oldScrollable.frameClient.borderBox.width ===
            newScrollable.frameClient.borderBox.width;

        invariant(
          isFrameEqual,
          'The width and height of your Droppable scroll container cannot change when adding or removing Draggables during a drag',
        );
      }

      const client: BoxModel = createBox({
        borderBox: adjustBorderBoxSize(
          existing.axis,
          oldClient.borderBox,
          newClient.borderBox,
        ),
        margin: oldClient.margin,
        border: oldClient.border,
        padding: oldClient.padding,
      });

      const closest: Closest = {
        // not allowing a change to the scrollable frame size during a drag
        client: oldScrollable.frameClient,
        page: withScroll(oldScrollable.frameClient, initialWindowScroll),
        shouldClipSubject: oldScrollable.shouldClipSubject,
        // the scroll size can change during a drag

top,
    right,
    bottom,
    left,
  };

  // Creating the borderBox by adding the borders to the paddingBox
  const borderBox: Spacing = expand(paddingBox, base.border);

  // We are not accounting for scrollbars
  // Adjusting for scrollbars is hard because:
  // - they are different between browsers
  // - scrollbars can be activated and removed during a drag
  // We instead account for this slightly in our auto scroller

  const client: BoxModel = createBox({
    borderBox,
    margin: base.margin,
    border: base.border,
    padding: base.padding,
  });
  return client;
};

it('should not clip the frame if requested not to', () => {
      const expandedClient: BoxModel = createBox({
        borderBox: expandBySpacing(frameClient.borderBox, ten),
        margin,
        padding,
        border,
      });
      const expandedPage: BoxModel = withScroll(expandedClient, windowScroll);
      const bigClient: BoxModel = createBox({
        borderBox: expandedClient.borderBox,
        margin,
        padding,
        border,
      });

      const droppable: DroppableDimension = getWithClient(bigClient, {
        shouldClipSubject: false,
      });

export const getDraggableDimension = ({
  descriptor,
  borderBox,
  windowScroll = origin,
  margin,
  border,
  padding,
}: GetDraggableArgs): DraggableDimension => {
  const client: BoxModel = createBox({
    borderBox,
    margin,
    padding,
    border,
  });
  const displaceBy: Position = {
    x: client.marginBox.width,
    y: client.marginBox.height,
  };

  const result: DraggableDimension = {
    descriptor,
    client,
    page: withScroll(client, windowScroll),
    placeholder: getPlaceholder(client),
    displaceBy,

changes.forEach((expandBy: Spacing) => {
          const custom: BoxModel = createBox({
            borderBox: expandBySpacing(frameClient.borderBox, expandBy),
            margin,
            padding,
            border,
          });

          const droppable: DroppableDimension = getWithClient(custom);

          expect(droppable.subject.active).toEqual(framePage.marginBox);
        });
      });